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

Question

我有这个页面：

当我滚动时，我想捕获我所在的div。

我知道如果使用：

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

...它将捕获div1，但我不想为每个div使用此代码，而是希望为所有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行代码来实现它？

- jQuerybeast

Answer 1

这里有一个不错的方法。你可能想要通过像素偏移优化“<=”，以提高用户体验，并将 div 选择器 ($divs) 移到回调之外以增加性能。请查看我的 fiddle: 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;
    });
});

- Brent Anderson

Answer 2

只需将其放入循环中。

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

alert(list);

列表将包含在您的视口内的每个div。

- xCRKx TyPHooN

Answer 3

我建议使用jQuery Inview插件：

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

这是一个维护良好的插件，能够检测当前查看器中的任何内容，使您能够将功能绑定到inview事件上。因此，一旦您的div在视野范围内，就可以触发所有相关的函数，当它离开用户的视线时再次触发。非常适合您的需要。

- Steve O

---

谢谢，虽然有成千上万的插件可以实现我想要的功能，但正如我所说，我不想使用任何类型的插件。就像Brent回复的那样，两行代码就可以解决问题。 - jQuerybeast

啊，抱歉，我可能跳过了那个！Brent的方法是正确的选择 :) - Steve O

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。

- Vladimir Potapov

---

它只给了我浏览器顶部的一个div id...!! 当其他div到达顶部时，它不会显示... 你能帮我吗？ - Vijaysinh Parmar