javascript - Jquery在滚动功能中停止

Question

我制作了一个小的 jquery 脚本。当您在页面上滚动并且您已超过 350 时。比显示一个按钮。当你回去时，按钮是隐藏的。这是脚本：

var button = $('a[title*="terug naar boven"]');

$(document).bind('scroll', function(e) {
    if (window.scrollY > 350) {
        button.animate ({
            opacity: 1
        })
    }
    if (window.scrollY < 350) {
        button.animate ({
            opacity: 0
        })
    }
});

但问题是。那就是剧本的继承。当我滚动。剧本每次都火。我怎样才能解决这个问题？那就是脚本是一次火。

Answer 1

如果按钮已经处于正确状态（显示或隐藏），为了防止按钮被动画化，您应该保持按钮的状态。

您可以使用变量来执行此操作

var buttonState = 0;
$(document).bind('scroll', function(e) {
    if (window.scrollY > 350 && buttonState == 0) {
        buttonState = 1;
        button.animate ({
            opacity: 1
        })
    }
    if (window.scrollY < 350 && buttonState == 1) {
        buttonState = 0;
        button.animate ({
            opacity: 0
        })
    }
});

或者，您也可以使用按钮的不透明度级别作为状态

如果您只想运行一次，您可以取消绑定事件的处理程序

$(document).bind('scroll', function(e) {
    if (window.scrollY > 350) {
        button.animate ({
            opacity: 1
        })
    }
    if (window.scrollY < 350) {
        button.animate ({
            opacity: 0
        })
    }
    $(document).unbind('scroll');
});