javascript - jQuery基于滚动的显示/隐藏菜单

我在网页上有一个全屏封面图像，当用户从封面向下滚动到内容时，将出现一个浮动菜单。我用代码覆盖了这一部分：

$(window).scroll(function(){

    if ($(this).scrollTop() > $('#scroll-down').offset().top) {
           $('.menu').animate({opacity: 1}, 1000);
           }

});

我无法工作的是，如果用户滚动回到顶部的封面，则在同一点淡出菜单。如果我将动画不透明度的“ else”条件添加回零，则菜单将完全不显示。

最佳答案

尝试这些修改。关键是在开始新动画之前，先停止（）前一个动画。并将淡出位置设置在淡入点上方10个像素处。

$(window).scroll(function(){
    if ($(this).scrollTop() > $('#scroll-down').offset().top) {
           $('.menu').stop().animate({opacity: 1}, 1000);
    } else if($(this).scrollTop() < $('#scroll-down').offset().top -10) {
           $('.menu').stop().animate({opacity: 0}, 1000);
    }
});

关于javascript - jQuery基于滚动的显示/隐藏菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27834721/