滚动时捕获第一个可见的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

这是一个很好的方法。您可能希望使用像素偏移优化'＆lt; ='以改善用户体验并在回调之外移动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处于可见状态，您就可以启动所需的所有相关功能，然后在离开用户视图时再次启动。非常适合您的需求。

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