使用jQuery查找当前可见元素并更新导航

Question

第一次在这里用户.我通常能够找到问题的答案,但我很难搞清楚这个问题.

目标:

我有一个带有侧边栏导航的页面布局,点击后会向下滚动到页面上的元素.但是,如果用户只是将页面向下滚动到特定元素,#id我希望导航中的相应链接成为.active.导航链接和相应的元素通过element#id和共享相同的值a[name].

类似于: NikeBetterWorld.com

HTML示例如下:

<nav>
    <a name="value">Link</a>
</nav>

<section id="value">
    content goes here
</section>

显然,有更多的部分,链接,元素等.但这是它的要点.因此,当用户向下滚动到section#value的a[value]将都获得了积极的类.

我之前在这里找到了一个有所帮助的答案,但我仍然遇到了一些问题.有关更多信息,请参阅此链接.

当前的Javascript/jQuery:

$(document).scroll(function() {
    var cutoff = $(window).scrollTop();
    var cutoffRange = cutoff + 200;

    // Find current section and highlight nav menu
    var curSec = $.find('.current');
    var curID = $(curSec).attr('id');
    var curNav = $.find('a[name='+curID+']');
    $(curNav).addClass('active');

    $('.section').each(function(){
        if ($(this).offset().top > cutoff && $(this).offset().top < cutoffRange) {
            $('.section').removeClass('current')
            $(this).addClass('current');
            return false; // stops the iteration after the first one on screen
        }
    });
});

问题:

虽然上面的代码工作到一定程度,但我遇到了一个大问题.我无法让整个元素留下来.current.如果元素的顶部离开窗口,它将丢失该类.我通过为新元素添加一个范围来修复它,但现在当用户向上滚动时,前一个元素将不会获得该类,.current直到元素的顶部到达窗口的顶部.如果窗口的主要部分在可见的情况下获得了.current课程,我更愿意这样做.

任何帮助,想法或建议将不胜感激.

提前致谢!

Answer 1

听起来你想检查部分的底部边缘而不是顶部.试试这个并一起删除范围:

if($(this).offset().top + $(this).height() > cutoff){

编辑:创造了一个小提琴.我想这正是你所描述的.

http://jsfiddle.net/pdzTW/