my way to preload images! haha
Update Coming Soon! Check out Skem9's future roadmap
Search for in

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

Written by: Yohn

The Affix plugin within Bootstrap is nice, when you put something under it those contents jump up when the user reaches the point where the Affix plugin starts. Heres a simple solution without using the affix plugin to allow a header above the navbar
Heres a sample code of the navbar
<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
.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.
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') } else { HeadNav.removeClass('fixed') navFixed.hide() } } })

gregory.roe ~ 01/23/13, 12:01am
You can get around this "jump" issue with Affix by giving the menu's container a height in the JS:


That's it!

See this example:
Yohn ~ 01/23/13, 2:02am
nice! that makes sense actually.. thanks for the heads up!