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

Jquery show/hide menu based on scroll

本文关键字：Jquery 显示 隐藏菜单 于滚动 滚动      更新时间：2023-09-26

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

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

我无法工作的是，如果用户滚动回顶部的封面，则在同一点淡出菜单。如果我将不透明度动画添加回 0 的"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);
    }
});
相关文章：