jquery - div一直在弹跳

Question

如果用户向下滚动并且菜单消失，我希望出现一个 div(返回顶部)。 div 向下滑动并反弹，但它一直在反弹。我只希望它在设置为固定位置之前反弹一次。

我知道发生这种情况是因为只要“(distance + navHeight) <= 1”，代码就会一遍又一遍地运行，但是有没有办法只运行一次代码？

$(window).on('scroll', function () {
    var scrollTop     = $(window).scrollTop(),
        elementOffset = $('.navigation').offset().top,
        navHeight = $('.navigation').height();
        distance      = Math.round((elementOffset - scrollTop));

    if((distance + navHeight) <= 1) {
        $('#scroll-top').slideToggle(700, 'easeOutBounce', function() {
            $(this).addClass('menu-stick');
        });
    }
});

CSS

.menu-stick {
    position: fixed;
    z-index: 2000;
    left: 0;
    right: 0;
    top: 0;
}

编辑:Here is the live version

Answer 1

将 Action 的触发器选择器更改为 #scroll-top:not(.menu-stick)

所以:

if (distance + navHeight) <= 1) {
    $('#scroll-top:not(.menu-stick)').slideToggle(700, 'easeOutBounce', function() {
        $(this).addClass('menu-stick');
    });
}