Question

我正在尝试达到与此处所述相同的效果： Show Div when scroll position 我甚至使用相同的代码，只是尝试淡入img而不是div。该效果适用于第一个图像（在滚动到视图时淡入），但所有后续图像在同一时间淡入淡出，使其在滚动时完全可见，而不是淡入视图。有没有人遇到过这个问题，或者可以建议我做错了什么？

/* Every time the window is scrolled ... */
$(window).scroll( function(){

/* Check the location of each desired element */
$('.hideme').each( function(i){

    var bottom_of_object = $(this).position().top + $(this).outerHeight();
    var bottom_of_window = $(window).scrollTop() + $(window).height();

    /* If the object is completely visible in the window, fade it in */
    if( bottom_of_window > bottom_of_object ){

        $(this).animate({'opacity':'1'},500);

    }

}); 

});

如果需要我的其余代码，我可以加入它，但它与此代码摘录的原始小提琴没有太大区别：http://jsfiddle.net/tcloninger/e5qaD/

我无法弄清楚当我用图像替换文本时小提琴正常工作，但我的网站没有。这看似相同的代码有两种不同的结果。

这是我的实际网站，所以你可以看到它在做什么。文本应该一次淡出，而不是一次淡出。 http://trentguillory.com/testwebsite/index2.html

Answer 1

使用与图像相同的代码没有问题。我将div代码与以下内容交换：<img class="hideme" src="http://placehold.it/350x150"/> See this fiddle. 你可以编辑这个小提琴并提供更多信息吗？

Answer 2

您的代码与JSFiddle示例之间的区别在于position（）。top为您提供元素相对于其父元素的位置。

由于JSFiddles没有将文本封装在DIV中，因此它们的代码会计算文本与HTML顶部的距离，这意味着滚动效果会起作用。

在您的代码中，父元素中图像元素之间的距离始终为0，因此所有图像元素都会同时出现。

而不是

$（本）.POSITION（）。顶部

使用

$（this）.offset（）。top

从整个页面的顶部给出元素的位置。这将有效。

在滚动位置显示img

2 个答案: