CODEWITHSUNDEEP
javascriptjqueryhtmlcss
eveo
eveo

Reputation: 2833

Fading a nav and making it fixed on scroll down, fade on scroll up

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;
}

Upvotes: 1

Views: 2743

Answers (1)

Stryner
Stryner

Reputation: 7318

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

Upvotes: 3

Related Questions