Question

基于此主题： 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);

            }
        });

    });

});

感谢您的帮助！

Answer 1

div最初不可见。请查看

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

加载页面时（不滚动）。不透明度是0，它在页面中向下，因此当你开始滚动时它变得可见。将尝试在几分钟内解决这个问题。

删除所有位置=相对。它会工作。

Answer 2

你在.ready函数中使用jQuery，但是$ inside。尝试此操作来创建命名空间别名：

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

或简化

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

Answer 3

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

在长网页上使用Lazy Load可以加快页面加载速度。在某些情况下，它还可以帮助减少服务器负载。

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

LazyLoad

Answer 4

感谢所有帮助，但我最终用以下代码替换了上面的代码：

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

它工作正常。

再次感谢大家。

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

4 个答案: