<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- required for this demo -->
<script src="http://code.jquery.com/jquery-1.7.1.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' });
} else {
$('#sticky_navigation').css({ 'position': 'relative', 'top':0 });
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
// NOT required:
// for this demo disable all links that point to "#"
$('a[href="#"]').click(function(event){
event.preventDefault();
});
});
</script>
<style type="text/css">
.demo_container { }
#sticky_navigation { height:50px;}
</style>
<br>
Header
<br>
Header
<br>
Header
<br>
Header
<br>
<div id="sticky_navigation">
<div class="demo_container" >
Content To be Stick Goes HERE
</DIV>
</DIV>
Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>Blah
<br>
0 comments :
Feel free to leave comment if you like above widget, have any questions or just say Hi! :)