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

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