jquery 错误在到达点后拍摄到顶部并复制图像

Question

我向我正在处理的网站添加了一些简单的 jquery，以便在用户滚动到屏幕上的某个点时让 2 个元素滑入 View 。动画会按照我的意愿进行，但是当我向下滚动到该区域时，就在动画结束之前，它会立即将我带到页面顶部。当我向下滚动时，动画已经完成，但它留下了看起来像是在它移动的区域中移动的文本的“副本”。我怎样才能阻止页面跳到顶部，我怎样才能阻止文本在它产生动画的地方留下一个副本？

这里是jquery

$(document).ready(function(){
        $(window).scroll(function(){
            if ($(this).scrollTop() > 1350) {
           $('#managecontent1').animate({left: '0px'},900);
           $('#managecontent2').animate({right: '0px'},900);
       }
            });
    });

这是文本复制的样子

提前致谢!

Answer 1

使用 jQuery 的 .off() 分离事件处理程序。

在下面的代码中使用了 .off() :

• 结合 setTimeout() 在动画被触发前临时分离滚动处理程序，以降低滚动处理程序触发的频率
• 在动画被触发后永久分离滚动处理程序。

Javascript:

$(function() {
    function scrollHandler() {
        $(window).off('scroll.managecontent');
        if ($(this).scrollTop() > 1350) {
            $('#managecontent1').animate({left: '0px'}, 900);
            $('#managecontent2').animate({right: '0px'}, 900);
        }
        else {
            setTimeout(observeScroll, 200);//Adjust timeout to maximum acceptable value. 200 ms shouldn't be too far off the mark.
        }
    }
    function observeScroll() {
        $(window).on('scroll.managecontent', scrollHandler);
    }
    observeScroll();
});

这可能会也可能不会解决问题。