Jquery show/hide 基于滚动的菜单

Question

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

$(window).scroll(function(){                       

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

});

我无法开始工作的是，如果用户滚动回顶部的封面，则在同一点淡出菜单。如果我将 'else' 条件动画不透明度添加回 0，则菜单根本不会显示。

Answer 1

尝试这些修改。关键是在开始新动画之前停止（）上一个动画。还要将淡出位置设置在淡入点上方 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);
    }
});

Jquery show/hide 基于滚动的菜单

Jquery show/hide menu based on scroll

javascript

jquery

scroll