修改

Question

此代码效果很好，但是当我在4-5次之后上下滚动时，它会崩溃并且所有元素都会消失。为什么会发生这种情况？如何解决？

$(window).on("load",function() {
    $(window).scroll(function() {
        var winheight = $(window).innerHeight();
            $(".fade").each(function() {
                /* Check the location of each desired element */
                var objectBottom = $(this).offset().top + $(this).outerHeight();
                var windowBottom = $(window).scrollTop() + $(window).innerHeight();

                /* If the element is completely within bounds of the window, fade it in */
                if ( windowBottom > (objectBottom - (winheight*0.65))) { //object comes into view (scrolling down)
                    if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}
                } else { //object goes out of view (scrolling up)
                    if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
                }
            });
        }); $(window).scroll(); //invoke scroll-handler on page-load
    });

Answer 1

好吧，我认为你的HTML是这样的：https://jsfiddle.net/szdwwdac/

有时，如果你快速上下滚动，当元素淡出时，你的if不能正常工作。

if ( windowBottom >= (objectBottom - (winheight*0.65))) { 
       if ($(this).css("opacity")==0) {$(this).fadeTo(300,1);}
} else { //object goes out of view (scrolling up)
       if ($(this).css("opacity")==1) {$(this).fadeTo(300,0);}
}

这是因为500ms的动画。其中一个解决方案可以是500ms滚动页面的启用/禁用。您可以查看此解决方案：How to disable scrolling temporarily?

修改

另一个解决方案可以是：当你在if里面时，添加一个“渐弱”的类。然后，在if，eval中，如果元素hasClass为“fading”。如果没有，你可以进去制作动画。

jQuery滚动淡入崩溃

1 个答案:

修改