滚动时捕获第一个可见的div id（视口）

我有这个页面：

我想在我滚动时捕捉到我在哪个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/3×2.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

把它扔进一个循环。

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

该列表将包含视口中的每个div。

Answer 3

我建议使用jQuery Inview插件：

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

维护良好的插件，可以检测当前查看器中的任何内容，使您能够将函数绑定到inview事件。 因此，只要您的div处于视图中，就可以启动所需的所有相关function，然后在离开用户视图时再次启动。 非常适合您的需求。

Answer 4

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