淡化导航并使其固定在向下滚动，而淡入则在向上滚动

Question

I'm trying to get my navigation to fade out the changes that were faded in (ul li color, and background color). I want the nav to fade back to its original state but I'm having trouble with the animation fading out.

I tried animating the removal of the class but that messes everything up!

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

You could move the css transition from the .nav-float classes to the #nav classes. Then you can simply just add or remove the class:

$(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