滚动时检测第一个顶部元素答案

【问题标题】：Detect first top element when scrolling滚动时检测第一个顶部元素
【发布时间】：2013-05-30 13:19:44
【问题描述】：

滚动时如何检测第一个顶部元素（谁在窗口视图中可见）？

像这样...

我从……开始。

$(window).scroll($.debounce(250,function(){
    $('.box').removeClass('current').each(function() {
       //if(statement) {
       //  $(this).addClass('current')
       //}
    });
}));

游乐场： http://jsfiddle.net/l2aelba/EUztW/

我不知道如何检测第一个盒子在上面。

【问题讨论】：

标签： javascript jquery scroll offset detect

【解决方案1】：

$(window).scroll($.debounce(250, function(){
    var scrollTop = $(window).scrollTop();
    var $first;
    var firstPos;

    $('.box').each(function() {
            var $box = $(this).removeClass('current');
            var pos = $box.offset();

            if(pos.top > scrollTop && (!firstPos || pos.top < firstPos.top)){
                $first = $box;
                firstPos = pos;
            }
    });

     if($first){
        $first.addClass("current");   
     }
}));

http://jsfiddle.net/EUztW/10/

【讨论】：

+1 谢谢，但是为什么检测“第一个权利”框不起作用？
@l2aelba 抱歉，应该是 offset 而不是 position。已更新。
一些问题。如果我有 1000 个盒子？ .each() 函数呢？
@l2aelba 您可能希望存储一些内容并引用它们，而不是在每个循环中重新查询。例如，您可以存储一次$(window)，一次存储一次$(".box")。另外，您可能应该在主循环中执行.removeClass('current') inside（例如$(this).removeClass("current")，因为.removeClass() 必须在内部循环，所以这是一种额外的处理。我之所以这么说是因为窗口的滚动处理程序可以经常触发，这对于 JS 每次都要做很多
@l2aelba 哈，是的，那个外部的 each 不是故意的。我的意思是只有一个。

【解决方案2】：

您可以使用 .offset() 查找顶部 div。

$(window).scroll($.debounce(250,function(){
    var top_one;
    var offset_top = 10000;
    $('.box').removeClass('current').each(function() {
        offset = $(this).offset();
        if(offset.top < offset_top){
            offset_top = offset.top;
            top_one = $(this);
        }
    });
    top_one.addClass('current');
}));

jsFiddle

【讨论】：

你是完全测试你的代码还是只是把它放在小提琴中并链接它？它根本不适合我 - 红色永远不会移动到不同的盒子
可能有点挑剔，但你真的不应该以$ 开头的所有变量命名，这有点违背目的。另外，不要“重新包装” jquery 变量。$($top_one) 是对 jquery 的浪费调用。
而且，这根本不起作用的原因是您永远不会将元素的位置与窗口的滚动位置进行比较。因此，无论滚动位置如何，您始终选择页面上的第一个 div。
是的，通常变量名开头的$ 意味着它包含一个jQuery 对象。显然，这不是必需的，但这是一个正常的约定。我知道在 PHP 中，变量以$ 开头，但在 JS 中通常不使用
@Ian ：对不起，我没有完全理解这个问题。我得到了它。我的错。谢谢