sticky navigation

by lovromar

HTML

<div class=top-nav>
    <div class=wrapper>
        <nav class=primary>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Blog</a></li>
                <li><a href="">Shop</a></li>
                <li><a href="">Contact</a></li>
            </ul>               
        </nav>                            
    </div>
</div>
<div class=wrapper>
    <div class=carousel></div>
    <div class=content>
    </div>
</div>

CSS

.bootstrap{position:fixed;width:100%;margin:0 auto;background:url(../images/elements/egg_shell.png) top left repeat;}
.wrapper{width:960px;margin:0 auto;overflow:hidden;}
.wrapper .brand{text-align:center;width:100%;display:block;}
.wrapper .primary{ padding:38px 0 28px 0;display:inline-block; background:red; width:100% }
.wrapper .primary li{display:inline;margin:0 22px 0 0;text-tra nsform:uppercase;font-size:16px;}
.wrapper .primary li:last-child{margin:0 0 0 0;}
.wrapper .primary li a{color:#000000;text-decoration:none;}
.wrapper .primary li a:hover, .wrapper .primary li a.active{color:#f15112;}
.carousel { height:611px; background:green; margin-top:50px; }
.content { height:900px; background:yellow; }

JavaScript

//create a stick nav
var menuOffset = $('.top-nav')[0].offsetTop; // replace #menu with the id or class of the target navigation
$(document).bind('ready scroll', function() {
    var docScroll = $(document).scrollTop();
    if (docScroll >= 155) {
        if (!$('.top-nav').hasClass('bootstrap')) {
            $('.top-nav').addClass('bootstrap').css({
                top: '-155px'
            }).stop().animate({
                top: 0
            }, 500);
        }
    } else {
        $('.top-nav').removeClass('bootstrap').removeAttr('style');
    }

});