0

我在我的网站上编写了一个小 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");
        }
    });
});

这很好用，除了如果我从底部滚动到顶部，反之亦然，底部菜单（页面顶部和底部的唯一一个）将继续完全淡出，然后才能开始淡出在。

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

问题的延伸是，如果用户疯狂滚动（例如，他们向下滚动 50+px，然后连续几次回到顶部），当他们停止时，菜单将继续淡入淡出，直到完成数字用户执行的周期数。一旦用户停止滚动，如何添加代码以取消淡出/淡入。

任何帮助表示赞赏:)

4

1 回答 1

0

在开始任何动画之前尝试 .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");
        }
    }); 
});
于 2013-08-30T11:46:13.790 回答