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

【问题标题】：Capture first visible div id while scrolling (viewport)滚动时捕获第一个可见的 div id（视口）
【发布时间】：2013-02-14 20:47:50
【问题描述】：

我有这个页面：

我想在滚动时捕捉我在哪个 div 上。

我知道如果我使用：

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

...它将捕获 div1，但我不想为每个 div 使用此代码，而是为所有 div 设置 1 sn-p

类似：

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

【问题讨论】：

标签： javascript jquery scroll

【解决方案1】：

这是一个很好的方法。您可能希望使用像素偏移优化 '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;
    });
});

【讨论】：

【解决方案2】：

把它扔进一个循环。

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

alert(list);

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

【讨论】：

【解决方案3】：

我建议使用 jQuery Inview 插件：

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

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

【讨论】：

谢谢你，虽然有成千上万的插件可以实现我想要的，但我不想使用任何类型的插件。正如布伦特回答的那样，两行代码就可以解决问题。
啊抱歉，我一定跳过了！布伦特的方法是前进的方向:)

【解决方案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

【讨论】：

它只给了我一个位于浏览器顶部的 div id...！！当其他 div 到达顶部时它没有显示...你能帮帮我吗？