javascript - 淡化导航并使其在向下滚动时固定，在向上滚动时淡化

Question

我试图让我的导航淡出淡入的变化(ul li 颜色和背景颜色)。我希望导航淡出回到其原始状态，但我遇到了动画淡出的问题。

我尝试为类的移除设置动画，但这把一切都搞砸了!

fiddle :http://jsfiddle.net/vp7chr47/1/

HTML

<div id="nav">
    <ul>
        <li>link</li>
        <li>link</li>
        <li>link</li>
    </ul>
</div>

JS

$(window).scroll(function () {
    var scroll_top = $(this).scrollTop();
    if (scroll_top >= 1) {
        $("#nav").addClass("nav-float");
    } else {
        setTimeout(function(){
            $("#nav").removeClass("nav-float");
        }, 1000 ).fadeOut("slow");
    }
});

CSS

body {
    background: #000;
    padding: 0;
    margin: 0;
    color: #00ff00;
}
#nav {
    width: 100%;
    height: 80px;
    border: 1px solid #ff0000;
}
#nav ul li {
    display: inline;
}
.nav-float {
    position: fixed;
    background: #fff;
    transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
}
.nav-float ul li {
    color: #ff0000;
    transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
}

Answer 1

您可以将 css transition 从 .nav-float 类移动到 #nav 类。然后你可以简单地添加或删除类:

$(window).scroll(function () {
    var scroll_top = $(this).scrollTop();
    if (scroll_top >= 1) {
        $("#nav").addClass("nav-float");
    } else {
        $("#nav").removeClass("nav-float");
    }
});

Working fiddle is here