当滚动经过一个点时设置导航动画

Question

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

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

有人知道如何修复这个问题吗?使用另一个函数，然后使用scroll()？谢谢!

下面是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;
        }
    });

});