Question

我在网页上有一个全屏封面图像，当用户从封面向下滚动到内容时，浮动菜单会淡入。我的代码中包含了以下代码：

$(window).scroll(function(){                       

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

});

我无法工作的是，如果用户滚动回到顶部的封面，则会在同一点淡出菜单。如果我将“其他”条件设置为将不透明度设置为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显示/隐藏菜单

1 个答案: