javascript - 滚动时检测第一个顶部元素

Question

滚动时如何检测第一个顶部元素（谁在窗口视图中可见） ？

像这样...

我从..

$(window).scroll($.debounce(250,function(){
    $('.box').removeClass('current').each(function() {
       //if(statement) {
       //  $(this).addClass('current')
       //}
    });
}));

游乐场：http: //jsfiddle.net/l2aelba/EUztW/

我不知道如何检测哪个第一个盒子在上面。

Answer 1

$(window).scroll($.debounce(250, function(){
    var scrollTop = $(window).scrollTop();
    var $first;
    var firstPos;

    $('.box').each(function() {
            var $box = $(this).removeClass('current');
            var pos = $box.offset();

            if(pos.top > scrollTop && (!firstPos || pos.top < firstPos.top)){
                $first = $box;
                firstPos = pos;
            }
    });

     if($first){
        $first.addClass("current");   
     }
}));

http://jsfiddle.net/EUztW/10/

Answer 2

您可以使用 .offset() 查找顶部 div。

$(window).scroll($.debounce(250,function(){
    var top_one;
    var offset_top = 10000;
    $('.box').removeClass('current').each(function() {
        offset = $(this).offset();
        if(offset.top < offset_top){
            offset_top = offset.top;
            top_one = $(this);
        }
    });
    top_one.addClass('current');
}));

jsFiddle