<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script>
$(function() {
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $(‘#sticky_navigation’).offset().top;
// our function that decides weather the navigation bar should have “fixed” css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// if we’ve scrolled more than the navigation, change its position to fixed to stick to top,
// otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) {
$(‘#sticky_navigation’).css({ ‘position’: ‘fixed’, ‘top’:0, ‘left’:0 });
} else {
$(‘#sticky_navigation’).css({ ‘position’: ‘relative’ });
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});
</script>
<style>
.demo_container { width:980px; margin:0 auto; }
#demo_top_wrapper { margin:0 0 20px 0; }
#demo_top { height:100px; padding:20px 0 0 0; }
#my_logo { font:70px Georgia, serif; }
/* our menu styles */
#sticky_navigation_wrapper { width:100%; height:50px; }
#sticky_navigation { width:100%; height:50px; background:url(trans-black-60.png); -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999; }
#sticky_navigation ul { list-style:none; margin:0; padding:5px; }
#sticky_navigation ul li { margin:0; padding:0; display:inline; }
#sticky_navigation ul li a { display:block; float:left; margin:0 0 0 5px; padding:0 20px; height:40px; line-height:40px; font-size:14px; font-family:Arial, serif; font-weight:bold; color:#ddd; background:#333; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }
#sticky_navigation ul li a:hover, #sticky_navigation ul li a.selected { color:#fff; background:#111; }
</style>
</head>
<body>
<header>fgfffffffffffffffffffffffff<!– … –></header>
<div id=”demo_top_wrapper”>
<!– a header with a logo just to have some content before the menu –>
<div id=”demo_top”>
<div class=”demo_container”>
<div id=”my_logo”>Our logo</div>
</div>
</div>
<!– this will be our navigation menu –>
<div id=”sticky_navigation_wrapper”>
<div id=”sticky_navigation”>
<div class=”demo_container”>
<ul>
<li><a href=”#” class=”selected”>HOME</a></li>
<li><a href=”#”>ABOUT US</a></li>
<li><a href=”#”>SERVICES</a></li>
<li><a href=”#”>CLIENTS</a></li>
<li><a href=”#”>PARTNERS</a></li>
<li><a href=”#”>CONTACT</a></li>
</ul>
</div>
</div>
</div>
</div><!– #demo_top_wrapper –>
A navigation menu that stays on top with jQuery
</body>
</html>
Web Smart Development 