JavaScript无法比较值 $（文档）。滚动（功能（e）{ var eTop=$（this.scrollTop（）） $（'.popup'）。每个（函数（i）{ 日志（eTop）； if（$（this）.offset（）.top-topLimit

无法工作，因为：

$(document).scroll(function(e){
    var eTop = $(this).scrollTop()
    $('.popup').each(function(i){
        log(eTop);
        if($(this).offset().top - topLimit <= eTop){
            $(this).fadeIn();
            }
        });
    });

及

---

是相同的值，并且您的IF条件从未满足。

问题在于图像被隐藏，因此

偏移
不起作用

移除

$(this).offset().top

修复它

问题在于图像是隐藏的，因此offsetTop无法像@Oriol指出的那样工作。但您可以通过测量文本高度来解决这个问题，因为图像正好位于文本之后。工作版本如下：

$（文档）。滚动（功能（e）{
var eTop=$（this.scrollTop（））
$（'.popup'）。每个（函数（i）{
如果（$（'p'）.height（）

这里确实存在两个问题：

1:
display:none
将对象移出正确的
DOM
位置，因此当
img
被隐藏时，其页面偏移量的计算始终与
scrollTop
相同（即相对于文档根的
0,0
）

2：即使您通过使用类似于
opacity:0
（将其放置在DOM中的正确位置）的方法对此进行补偿，
fadeIn
希望设置
display:none
，因此我们必须手动
hide（）
输入并重置它的
不透明度
，然后
fadeIn
您可以设置动画，将不透明度设置为0作为开始。要获得与“显示无”相同的效果，您可以首先将位置设置为绝对。我还添加了一个show类检查，以便代码在已经显示时不会再次运行


不，
这个
在每个循环中使用，我刚刚用控制台运行了小提琴，输出了这两个值，它们总是相同的。@MatúúDúbrava是正确的，这些值总是相同的，因为元素是
display:none
，这将它从DOM中删除，给它一个0位置。@MatúDúbrava我不是OP；）是的，现在我明白你的意思了，我第一次甚至没有看到弹出元素look记录了我所说的内容。
$(this).offset().top

.popup{
    display:none;
}

$(document).scroll(function(e){
    var eTop = $(this).scrollTop()
    $('.popup').each(function(i){
        if($('p').height() < eTop){
            $(this).fadeIn();
        }
    });
});

$(document).scroll(function(e){
    var eTop = $(this).scrollTop()
    $('.popup').each(function(i){
        log(eTop);
        if(!$(this).hasClass('show') && $(this).offset().top < eTop){
            $(this).addClass('show').animate({'opacity' : '1'}, 500);
        }
    });
});

.popup{
    opacity: 0;
    position: absolute;
}
.show {
    position: static;
}