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。

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 can be found here。

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

JQuery Scroll控制导航的不透明度淡入，如何在反向滚动时停止导航淡出？

2 个答案: