Twitter Bootstrap – Code to switch stationary navbar to fixed – Bootstrap

This has been used in the trial sfor the BlackBocks Nylex website.
Originally taken from this pastebin.

This is an untried piece of code, but still interesting: Fixed Navigation Bar With Twitter Bootstrap

<script></pre>
$(window).load(function() {
 // fix sub nav on scroll
 var $win = $(window)
 , $nav = $('.navbar')
 , $nC = $('#navCont')
 , navTop = $('.navbar').length && $('.navbar').offset().top + 20
 , isFixed = 0

 $nav.addClass('auto-size');

processScroll()

 $nC.addClass('auto-size')
 $win.on('scroll', processScroll)

function processScroll() {
 var i, scrollTop = $win.scrollTop()
 if (scrollTop >= navTop && !isFixed) {
 isFixed = 1
 $nC.removeClass('auto-size')
 $nav.addClass('navbar-fixed-top');
 } else if (scrollTop <= navTop && isFixed) {
 isFixed = 0
 $nC.addClass('auto-size')
 $nav.removeClass('navbar-fixed-top');
 }
 }
});

<!-- Put this in your stylesheet -->
.auto-size { width: auto; }
<pre>
</script>

Revisions

Tags: , ,

No comments yet.

Leave a Reply