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');
}));

jsフィドル