在滚动位置显示图像

Posted 2023-05-08

【中文标题】在滚动位置显示图像

【英文标题】：Show img on scroll position

【发布时间】：2014-02-23 11:35:29

【问题描述】：

我正在尝试实现与此处所述相同的效果： 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

【参考方案1】：

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

【讨论】：

到目前为止，这是我的网站。您可以看到所有图像同时褪色。 trentguillory.com/testwebsite/index2.html

【参考方案2】：

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

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

在您的代码中，图像元素与父元素之间的距离始终为 0，因此它们都同时显示。

代替

$(this).position().top

使用

$(this).offset().top

它给出了元素从整个页面顶部开始的位置。这会起作用。

【讨论】：

好吧，这解决了问题，但由于我缺乏声誉，我什至无法投票。