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

});

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

1 个答案: