Sticky Menu

by Robert Herring

HTML

<body>
<header>
	<nav>
		<div class="container">
			<ul>
				<li class="active"><a href="index.html" data-scroll="IE">FireFox</a></li>
				<li class="blue"><a href="galerija.html" data-scroll="IE">Chrome</a></li>
				<li class="blue"><a href="index.html" data-scroll="IE">Safari</a></li>
				<li class="blue"><a href="index.html" data-scroll="IE">Opera</a></li>
				<li class="blue"><a href="index.html" data-scroll="IE">Internet Explorer</a></li>
		  	</ul>
    	</div>
    </nav>
</header>
    <div id="main">TEXT TEXT TEXT <br />
        TEXT TEXT TEXT <br />
        TEXT TEXT TEXT <br /></div>

CSS

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: 'Arial';
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} /* this make our menu fixed top */

.container {
    margin: 0 auto;
    width: 540px;
}

header {
    padding-top: 130px;
    background: #3d4144 url("../img/bg.png") 0 0 repeat;
    margin-bottom: 20px;
}

nav {
    height: 36px;
    background: #464b4c;
    border-top: 1px solid #353939;
    border-bottom: 1px solid #2e3131;
    background-image: -webkit-linear-gradient(top, #464b4c, #3f4344);
    background-image: -moz-linear-gradient(top, #464b4c, #3f4344);
    background-image: -o-linear-gradient(top, #464b4c, #3f4344);
    background-image: linear-gradient(to bottom, #464b4c, #3f4344);
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
    border-bottom: 3px solid #EE3023;
}
nav a {
    -webkit-transition: 0.1s ease-out;
    -moz-transition: 0.1s ease-out;
    -o-transition: 0.1s ease-out;
    transition: 0.1s ease-out;
    -webkit-transition-property: background-color, line-height;
    -moz-transition-property: background-color, line-height;
    -o-transition-property: background-color, line-height;
    transition-property: background-color, line-height;
}
nav ul {
    float: left;
    border-left: 1px solid #353939;
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    border-right: 1px solid #4d5354;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
nav li {
    float: left;
}
nav a {
    display: block;
    padding: 0 20px;
...

JavaScript

jQuery("document").ready(function($){
    
    var nav = $('nav');
    var navh = $('nav').outerHeight();
    var mainP = $('#main').css('paddingTop');
    
    $(window).scroll(function () {
        if ($(this).scrollTop() > 130) {
            nav.addClass("f-nav");
            $('#main').css('paddingTop',navh);
            console.log(navh)
        } else {
            nav.removeClass("f-nav");
            $('#main').css('paddingTop',mainP);
        }
    });
 
});