Question

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

我得到了这个Fiddle，我想在元素上使用fadeIn（），当它们距离屏幕顶部100像素时。我给出了用于比较的JavaScript 3值，以便知道何时应该发生，但我没有工作......我通过我使用的日志函数自己测量了值，它应该可以工作，但它只是没有＆＃39; t ...我希望有人可能会看到错误我不能...谢谢

Answer 1

它无法正常工作，因为：

var eTop = $(this).scrollTop()

和

$(this).offset().top

是相同的值，永远不会满足您的IF条件。

Answer 2

问题是图片已隐藏，因此offsetTop无效。

卸下

.popup{
    display:none;
}

修复它。

Demo

Answer 3

问题是你的图像是隐藏的，所以offsetTop不会像@Oriol指出的那样工作。但是你可以通过测量文本高度来解决这个问题，因为图像就在文本之后。工作版本是：http://jsfiddle.net/D6tE2/6/

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

Answer 4

Another solution

这里真的有两个问题：

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

2：即使你使用像0,0这样的东西来补偿这一点 - 它将它放在DOM中的正确位置，opacity: 0期望设置fadeIn，所以我们有要手动display: none该条目并将其重置为hide()，然后opacity。

Answer 5

您可以设置动画，将不透明度设置为0以开始。要获得与display none相同的效果，您可以先将位置设置为绝对值。我还添加了show类的检查，以便代码在显示时不再运行

http://jsfiddle.net/D6tE2/14/

$(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);
        }
    });
});

CSS

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

JavaScript无法比较值

5 个答案: