滚动通过一个点时的动画导航

Question

我正在尝试为我的导航菜单设置动画（从顶部滑入），它由 scroll() 函数触发。如果用户滚动超过 40，导航菜单需要动画。当用户滚动少于 40 次时，导航菜单必须再次动画（向上滑动）。

它确实适用于下面 jsFiddle 中的代码，但是当用户从 40 以上滚动到底部时，每次滚动时都会调用该函数，因此导航菜单向下滑动非常缓慢且不顺畅。

有人知道如何使用另一个函数然后滚动（）来解决这个问题吗？谢谢！

这里是jsFiddle，下面是jQuery代码。

$(document).ready(function() {

    /** HIDE MENU **/
    $(".menu").css("margin-top", "-88px");

    $(window).scroll(function() {

        var verschil = ($(window).scrollTop() / 5);

        if (verschil > 40) 
        $('.menu').animate({'margin-top': '0px' }, {duration: 500, queue: false});

        else if (verschil < 40)
        $('.menu').animate({'margin-top': '-88px' }, {duration: 500, queue: false});
    });

});

Answer 1

尝试添加这两个控制变量：

$(document).ready(function() {

    /** HIDE MENU **/
    $(".menu").css("margin-top", "-88px");
    var mustSlideDown = true;
    var mustSlideUp = false;
    $(window).scroll(function() {

        var verschil = ($(window).scrollTop() / 5);

        if (verschil > 40 && mustSlideDown)  {

            $('.menu').animate({'margin-top': '0px' }, {duration: 500, queue: false});
            mustSlideDown = false;
            mustSlideUp = true;
        }
        else if (verschil < 40 && mustSlideUp) {

            $('.menu').animate({'margin-top': '-88px' }, {duration: 500, queue: false});
            mustSlideUp = false;
            mustSlideDown = true;
        }
    });

});