jquery - JQuery Scroll 控制 Nav 的不透明度淡入，如何阻止 Nav 在反向滚动时淡出？

Question

我需要一些 jquery 的帮助。我在页面顶部有一个固定的导航，页面加载时不透明度设置为 0。当页面向下滚动时，导航淡入使用：

function EasyPeasyParallax() {
    scrollPos = $(this).scrollTop();
$('#nav').css({
        'opacity': 0+(scrollPos/800)
    });
});

我怎样才能使它在页面向上滚动时不会淡出？

我试过用 if 语句来做这件事，但我的 jquery 不是太热。

提前致谢。埃德·尼尔。

Answer 1

使用这个：（woking jsFiddle）

function EasyPeasyParallax() {
    scrollPos = $(document).scrollTop();
        $('#nav').css({
            'opacity': 0+(Math.min(scrollPos/800,1))
        });
};

$(function(){
    $('body').bind('mousewheel',EasyPeasyParallax);
});

注意：我使用了鼠标滚轮事件，但是您可以以任何您喜欢的方式检测滚动。还要注意Math.min()用法，所以不透明度的值不会超过 1

另一个注意事项：使用jsFiddle.stop().animate()而不是.css()更好看的淡入淡出效果。

Answer 2

试试这个：

$(document).ready(function(){
    $(window).scroll(function(){
        if($(this).scrollTop() > 200){
             $('#nav').fadeIn(1000);   
        }
    });
});

使用CSS：

#nav{
    display:none;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:50px;
    background-color:red;
}

可以在此处找到工作的JSFiddle 。

使用fadeIn()比手动更改 css 更好，因为 jquery 会自动处理跨浏览器 css 问题。例如，opacity对于 IE 是alpha(opacity=50)