Adding CSS3 Transition Floating Nav Bar - JQUERY

Question

I've created a floating nav-bar using jquery .

It appers instantly when i scroll. I don't want it to appear instantly.

I want to make it appear smoothly .

When i scroll down the navigation bar appears instantly. I wanted to apply css3 transition to it using jquery. But i don't have a clue on how do it.

Here's the FIDDLE .

Some one please help me.

Answer 1

When you scroll you want to add a class of active to your nav-bar.

Then, in your CSS have the following:

.nav-bar { opacity: 0; transition: opacity 1s ease-in; }

nav-bar .active { opacity: 1; }

Answer 2

See this fiddle:

http://jsfiddle.net/FVfnL/3/

nav.css({
         position: 'static',
         height: '85px',
         top: '-100px',
         display: 'none',
       });

Answer 3

Or is the behavior you want, something like this: http://jsfiddle.net/FVfnL/4/

var nav = $('.main-nav');
    var navHomeY = nav.offset().top;
    var isFixed = false;
    var $w = $('.scrollbar');
    $w.scroll(function() {
        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navHomeY;

        if (shouldBeFixed && !isFixed) {
            nav.css({
                position: 'fixed',
                top: 0,
                left: '15px',
                transition: 'position,top 1.5s ease 0.1s',
                width: nav.width()
            });
            isFixed = true;
        }
        else if (!shouldBeFixed && isFixed)
        {
            nav.css({
                top: navHomeY,
                transition: 'position,top 1.5s ease 0.1s',
            });
            isFixed = false;
        }
    });