滾動時捕獲第一個可見的div id（視口）

Question

我有這個頁面：

我想捕捉滾動時所在的div。

我知道如果我使用：

if( $(document).scrollTop() > $('#div1').position().top) {  
console.log('Div1')
  }

...它將捕獲div1，但我不想為每個div使用此代碼，而是要為所有div設置1個代碼段

就像是：

var a =   // The div i am at
if( $(document).scrollTop() > $(a).position().top) {    
    console.log($(a).attr('id'))
}

我正在尋找類似視口的東西： http : //www.appelsiini.net/projects/viewport/3x2.html

如果沒有插件，只需2-3行，我能否實現？

Answer 1

這是一個不錯的方法。 您可能需要使用像素偏移優化'<='以改善用戶體驗，並將div選擇器（$ divs）移動到回調之外以提高性能。 看看我的小提琴： http : //jsfiddle.net/brentmn/CmpEt/

$(window).scroll(function() {

    var winTop = $(this).scrollTop();
    var $divs = $('div');

    var top = $.grep($divs, function(item) {
        return $(item).position().top <= winTop;
    });
});

Answer 2

   $(window).scroll(function () {

        $("#privacyContent div").each(function () {
            var bottomOffset = ($(this).offset().top + $(this).height());
            console.log("Botom=",bottomOffset ,"Win= ", $(window).scrollTop());
            if (bottomOffset > $(window).scrollTop()) {

                $("#menu a").removeClass("active");
              //  console.log("Div is= ",$(this).attr('id'));
                $("#menu a[href='#" + $(this).attr('id') + "']").addClass("active");
                $(".b").removeClass("fsActive");
                var div = $(this);
                div.find(".b").addClass("fsActive");

                return false;
            }
        });

});

我這樣做是這樣，它可以很好地檢測所有div ID

Answer 3

只需將其放入循環中即可。

var list = [];
$("div").each(function(index) {
    if( $(document).scrollTop() > $(this).position().top) 
        list.push($(this));
});

alert(list);

列表將包含視口中的每個div。

Answer 4

我建議使用jQuery Inview插件：

https://github.com/protonet/jquery.inview

維護良好的插件可檢測當前查看器中的內容，使您可以將功能綁定到inview事件。 因此，一旦看到div，您便可以關閉所需的所有相關功能，然后在離開用戶視圖時再次關閉。 將非常適合您的需求。