Sticky Navigation Bar

Oto krótki kod na zawieszaną nawigację, jak wstawimy ją pod nagłówkiem. Działa głównie z szablonami co mają marginesy po lewej i prawej (…).
<style> /* Sticky Navigation Bar */ sticknav { background: #ffffff; height: 30px; width: 100%; margin-right: 0px; left: 0px; position: relative; z-index: 9999; } /* Centre Navigation */ .tabs-inner .widget ul { text-align: center;} .tabs .widget li, .tabs .widget li {display: inline-block; float: none} /* None Borders Navigation */ #navigationbar > ul > li > a {border: none} /* Float Navigation */ .fixed { position:fixed} </style> <!-- start navmenu --> <sticknav> <div id="navigationbar"> <ul> <li><a title="home" href="LINK">Home</a></li> <li><a title="TITLE" href="LINK">PAGE TITLE</a></li> <li><a title="TITLE" href="LINK">PAGE TITLE</a></li> <li><a title="TITLE" href="LINK">TOPIC</a></li> <li><a title="TITLE" href="LINK">TOPIC</a></li> </ul> </div> </sticknav> <!-- end navmenu --> <!-- jQuery Code --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //Calculate the height of <header> //Use outerHeight() instead of height() if have padding var aboveHeight = $('header').outerHeight(); // when scroll $(window).scroll(function(){ //if scrolled down more than the header's height if ($(window).scrollTop() > aboveHeight){ // if yes, add "fixed" class to the <sticknav> // add padding top to the #content (value is same as the height of the sticknav) $('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px'); } else { // when scroll up or less than aboveHeight, remove the "fixed" class, and the padding-top $('sticknav').removeClass('fixed').next().css('padding-top','0'); } }); }); </script>