0

我正在尝试为我的导航菜单设置动画（从顶部滑入），它是由 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});
    });

});
4

1 回答 1

1

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

$(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;
        }
    });

});
于 2013-04-27T08:26:17.243 回答