Question

我已经在我的网站上写了一个小的jquery脚本来淡出菜单（叫做menew和menew2）。当用户位于页面顶部时，两者都存在。当用户位于底部时，仅存在第二个（底栏）菜单。当用户在页面的中间位置时，没有菜单。

/*Menu*/

$(document).ready(function(){
    $(window).scroll(function(){
        if($(window).scrollTop()<50){
            $('#menew').fadeIn("slow");
        } else {
            $('#menew').fadeOut("slow");
        }
    }); 
});

/*Menu 2*/

$(document).ready(function(){
    $(window).scroll(function(){
        if($(window).scrollTop() > 0 - 50 + ($(document).height() - $(window).height())){
            $('#menew2').fadeIn("slow");
        } else if($(window).scrollTop()<50){
            $('#menew2').fadeIn("slow");
        } else {
            $('#menew2').fadeOut("slow");
        }
    });
});

这很好用，除非我从底部向上滚动到顶部，反之亦然，底部菜单（页面顶部和底部唯一一个）将继续完全淡出，然后才能启动重新投入。

如何重新编码，以便菜单停止淡出，并在到达顶部/底部时开始淡入。

问题的一个扩展是如果用户生气滚动（ EG他们向下滚动50 + px然后连续几次回到顶部），当他们停止时，菜单将会继续淡出，直到完成用户所做的循环次数。如何在用户停止滚动时添加代码以取消淡出/输入。

感谢任何帮助：）

Answer 1

在开始任何动画之前尝试.stop（） http://api.jquery.com/stop/

$(document).ready(function(){
    $(window).scroll(function(){
        if($(window).scrollTop()<50){
            $('#menew').stop().fadeIn("slow");
        } else {
            $('#menew').stop().fadeOut("slow");
        }
    }); 
});

JQuery菜单栏不必要的重复动画

1 个答案: