滚动时捕获第一个可见的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，您便可以关闭所需的所有相关功能，然后在离开用户视图时再次关闭。 将非常适合您的需求。