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

Question

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

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