高级Jquery | 滚动导航已选中

当用户滚动到页面上的特定部分时，我需要帮助选择li元素：

请看这里我的进展： http ： //jsfiddle.net/FvBqA/349/

如果您单击“服务”链接，文本颜色应该变为红色，就像您在页面的该部分一样，如果您单击“主页”或“联系”，则再次相同。

我对jquery有一个想法，你需要能够向LI添加和删除类，以便css可以选择所选类并按照每个渲染进行渲染。

可以在此处查看function： http ： //demicreative.com/#capabilities

如果向下滚动并查看工作部分，您会注意到导航项目已被选中 – 我正在使用相同的function。

Answer 1

试试这个：

var header_height = $('#nav').outerHeight(); var sections = []; $('#nav a').each(function(){ var section = $(this.hash).offset() sections.push({ 'link':$(this).parent(), 'top' : $(this.hash).offset().top-header_height, 'bottom' : $(this.hash).offset().top + $(this.hash).outerHeight() -header_height }); }); $('#nav a').click(function(e) { e.preventDefault(); $('html,body').animate({ scrollTop: $(this.hash).offset().top - header_height }, 500); }); $(window).scroll(function(){ for(var i = 0; i < sections.length; i++) if($(window).scrollTop() >= sections[i].top && $(window).scrollTop() <= sections[i].bottom){ sections[i].link.addClass('selected') .siblings().removeClass('selected'); } });​ 

我将事件直接附加到#nav中的#nav 。 我将选定的类添加到父元素，并从父元素的兄弟元素中删除它。 我还使滚动偏移量减少70 px，导航的高度和它的填充。

更新：没有任何特定部分的引用仅部分这意味着如果您展开，添加新的链接或部分，它仍然可以工作，而无需更新JavaScript。

小提琴： http ： //jsfiddle.net/iambriansreed/5Ta8j/

Answer 2

试试这个：

 $(".scroll").click(function(e){ e.preventDefault(); $('html,body').animate({scrollTop:$($(this).attr('href')).offset().top - $('#nav').outerHeight()}, 500); $('.scroll').removeClass('selected') $(this).addClass('selected'); }); 

http://jsfiddle.net/FvBqA/354/

---

试试这个：

 $(".scroll").click(function(e){ e.preventDefault(); $('html,body').animate({scrollTop:$($(this).attr('href')).offset().top - $('#nav').outerHeight()}, 500); $('.scroll').removeClass('selected') $(this).addClass('selected'); }); $(window).scroll(function(){ var hdr = $('#header').offset().top - $('#nav').outerHeight(); var svc = $('#services').offset().top - $('#nav').outerHeight(); var ctt = $('#contact').offset().top - $('#nav').outerHeight(); if ($(window).scrollTop() >= svc) { $('.scroll').removeClass('selected') $('a[href="#services"]').addClass('selected'); } if ($(window).scrollTop() >= ctt) { $('.scroll').removeClass('selected') $('a[href="#contact"]').addClass('selected'); } }) 

http://jsfiddle.net/FvBqA/357/