捕捉第一個可見的DIV ID時滾動（視）

enter image description here

我想捕捉在其上的div我，而我滾動。

我知道如果我使用：

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

...這將捕獲DIV1但不是使用此代碼爲每一個DIV我想設置1段的所有div

喜歡的東西：

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行？

來源

2012-01-26 jQuerybeast

這是一個很好的方法來做到這一點。您可能需要優化'< ='像素偏移量以改善用戶體驗，並將回調區外部的選擇器（$ 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; 
    }); 
});

來源

2012-01-26 23:25:06

只是把它扔進一個循環。

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

alert(list);

該列表將比每個div都在您的視口。

來源

2012-01-26 23:07:30

我建議使用jQuery插件Inview：

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

保持良好的插件檢測任何內容是觀衆目前，使您能夠綁定功能的inview事件。因此，只要您的div在視圖中，就可以啓動您想要的所有相關功能，然後在它離開用戶視圖時再次啓動。對你的需求會很好。

來源

2012-01-26 23:16:12

謝謝雖然有數以千計的插件實現我想要的東西，因爲說我不想使用任何類型的插件。正如Brent所回答的那樣，一行2行代碼就可以解決這個問題。 – jQuerybeast 2012-01-27 02:44:31

對不起，我一定跳過了！布倫特的方法是前進的道路:) – 2012-01-27 10:06:33

$(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

來源

2013-02-14 12:47:50

它給我只有一個div ID，這是頂部瀏覽器...！當其他div達到頂部時，它不顯示...你能幫我嗎？ – 2016-06-08 15:45:42

我想要每個在屏幕上可見的div id。 – 2016-06-09 03:48:56

捕捉第一個可見的DIV ID時滾動（視）

回答

相關問題