Bootstrap V2 Affix like alternative to the navbar fixed top class

Twitter Bootstrap .^. Website Tutorials | Submited Nov 15, 2012

Written by: Yohn

Heres a sample code of the navbar

Code:
<div class="navbar navbar-inverse" id="HeadNav">
  <div class="navbar-inner">
    contents of the navbar
  </div>
</div>
<div class="navFixed"></div>

That id="HeadNav" is used for us to find the position from the top of the page and class="navFixed" has the following CSS codes applied to it
.navFixed {height:40px; display:none;}
And finally we need this CSS code to get the navbar fixed on the top once we reach the point that it needs to be on the top

Code:
.fixed {
  width:inherit;
  position:fixed;
  top:0;
  max-width:1225px;
  z-index:2000;
}

It has display:none; set on page load because we're at the top of the page, where the navbar is lower than the header. The height need to be how ever tall / height your navbar is so then once we reach the navbar it gets shown and the page doesnt jump around.

Heres the javascript code that put all this into action.

Code:
var $window = $(window)
, $docWidth = $window.width()
, HeadNav = $('#HeadNav')
, $pos = HeadNav.offset().top
, navFixed = $('.navFixed')
	
$(document).on('load scroll', function(){
	var docHeight = $window.height();
	if($docWidth > 780 && docHeight > 500){
		if($window.scrollTop() >= $pos){
			HeadNav.addClass('fixed')
			navFixed.show()
		} else {
			HeadNav.removeClass('fixed')
			navFixed.hide()
		}
	}
})

0 Like Add to Favorites