基于滚动位置的jQuery淡入淡出元素答案

【问题标题】：jQuery fade element based on scroll position基于滚动位置的jQuery淡入淡出元素
【发布时间】：2014-01-29 16:52:55
【问题描述】：

基于这里的这个线程： Fade in element on scroll down using css

我在一个简单的测试页面上使用了已接受答案中的代码（对动画的运行方式稍作更改），并且效果很好。当我将代码移动到更复杂的页面时，它无法正常工作。我在两页之间更改的只是我想要动画元素的选择器。经过一番挖掘后，它似乎将所需元素的位置弄错了。页面上的哪些内容会影响职位的数学计算？不幸的是，我无法链接到我的页面，没有一些工作，所以如果可能的话，在我这样做之前我想要一些可能的建议。

这是我正在使用的 JQ：

jQuery(document).ready(function(){

    $(window).scroll(function () {

        /* Check the location of each desired element */
        $('.fadein').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 it */
            if (bottom_of_window > bottom_of_object) {

                $(this).delay(90 * i).animate({
                    'opacity': '1'
                }, 600);

            }
        });

    });

});

感谢您的帮助！

【问题讨论】：

您是否使用了任何可能与 jQuery $ 变量冲突的 JS 插件？
我现在有样本：简单测试：tomliv.com/so-test/scrolltest.html 问题页面：tomliv.com/so-test/about
@tomliv Hardcode bottom_of_window = 1426。这将一直有效，直到我们改变逻辑。
我们也发现了这一点 - 我们使用了 2000 - 但是页面是响应式的，因此在较窄的宽度下，由于页面高度会发生变化，因此对高度进行硬编码会失败。

标签： javascript jquery jquery-animate

【解决方案1】：

div 最初是不可见的。检查

jQuery('.fadein').css('opacity');

页面加载时（不滚动）。不透明度最初为 0，它在页面的下方，因此当您开始滚动时它变得可见。将尝试在几分钟内解决此问题。

删除所有Position=relative。它会起作用的。

【讨论】：

是的。具有 .fadein 类的 3 个图标应为 opacity=0，直到它们的底部高于页面底部，然后脚本将按顺序类型顺序动画到 opacity=1。这是想要的效果。目前，无论其位置如何，它们都会在任何滚动时进行动画处理 - 包括页面底部之外的站点。
@tomliv 它最初的不透明度为 0，当您开始滚动时，不透明度变为 1。
我认为它获得了其父 div 的顶部定位
添加了 position=relative 作为尝试修复。没有它也无法工作。你没有让它工作吗？
我删除了 css 中的所有 position=relative （即从父 div 中）并且它起作用了。

【解决方案2】：

您在 .ready 函数中使用了 jQuery，但在其中使用了 $。试试这个来创建一个命名空间别名：

jQuery(document).ready(function($) { ... });

或简体

jQuery(function($){ ... });

【讨论】：

我全部更改为 $ 但结果仍然相同。不过谢谢。我在上面添加了测试页面。
这不是我的建议。如果有的话，您会将所有 $ 更改为 jQuery。
我把 jQuery(document).ready(function(){ 改成了 $(document).ready(function(){ 那不好？

【解决方案3】：

延迟加载是延迟加载长网页中的图像。在用户滚动到它们之前，不会加载视口之外的图像。这与图像预加载相反。

在长网页上使用延迟加载将使页面加载更快。在某些情况下，它还可以帮助减少服务器负载。

如果您想根据滚动加载图像，我认为这就是您想要的！

LazyLoad

【讨论】：

谢谢。延迟加载很好，我们可能会添加它，但我要的是动画效果，而不仅仅是延迟加载。

【解决方案4】：

感谢所有帮助，但我最终将上面的代码替换为：

http://imakewebthings.com/jquery-waypoints/

它工作正常。

再次感谢大家。

【讨论】：