Revision 217 is a pre-publication revision. (Viewing current revision instead.)

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 [html] <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> [/html]

Revisions

Revision Differences

June 5, 2012 @ 13:49:12Current Revision
Content
Deleted: &nbsp;Added: This has been used in the trial sfor the BlackBocks Nylex website.
 Added: Originally taken from <a href="http:// pastebin.com/CCj4L6EL" target="_blank">this pastebin</a>.
 Added: This is an untried piece of code, but still interesting: <a href="http:// bforrest.com/ blog/2012/04/ 18/fixed-navigation-bar-with- twitter-bootstrap/" target="_blank">Fixed Navigation Bar With Twitter Bootstrap</a>
Unchanged: [html]Unchanged: [html]
Unchanged: &lt;script&gt; &lt;/pre&gt;Unchanged: &lt;script&gt; &lt;/pre&gt;
Unchanged: $(window).load(function() {Unchanged: $(window).load(function() {
Unchanged: // fix sub nav on scrollUnchanged: // fix sub nav on scroll
Unchanged: var $win = $(window)Unchanged: var $win = $(window)
Unchanged: , $nav = $('.navbar')Unchanged: , $nav = $('.navbar')
Unchanged: , $nC = $('#navCont')Unchanged: , $nC = $('#navCont')
Unchanged: , navTop = $('.navbar').length &amp;&amp; $('.navbar').offset().top + 20Unchanged: , navTop = $('.navbar').length &amp;&amp; $('.navbar').offset().top + 20
Unchanged: , isFixed = 0Unchanged: , isFixed = 0
Unchanged: $nav.addClass( 'auto-size');Unchanged: $nav.addClass( 'auto-size');
Unchanged: processScroll()Unchanged: processScroll()
Unchanged: $nC.addClass( 'auto-size')Unchanged: $nC.addClass( 'auto-size')
Unchanged: $win.on('scroll', processScroll)Unchanged: $win.on('scroll', processScroll)
Unchanged: function processScroll() {Unchanged: function processScroll() {
Unchanged: var i, scrollTop = $win.scrollTop()Unchanged: var i, scrollTop = $win.scrollTop()
Unchanged: if (scrollTop &gt;= navTop &amp;&amp; !isFixed) {Unchanged: if (scrollTop &gt;= navTop &amp;&amp; !isFixed) {
Unchanged: isFixed = 1Unchanged: isFixed = 1
Unchanged: $nC.removeClass( 'auto-size')Unchanged: $nC.removeClass( 'auto-size')
Unchanged: $nav.addClass( 'navbar-fixed-top');Unchanged: $nav.addClass( 'navbar-fixed-top');
Unchanged: } else if (scrollTop &lt;= navTop &amp;&amp; isFixed) {Unchanged: } else if (scrollTop &lt;= navTop &amp;&amp; isFixed) {
Unchanged: isFixed = 0Unchanged: isFixed = 0
Unchanged: $nC.addClass( 'auto-size')Unchanged: $nC.addClass( 'auto-size')
Unchanged: $nav.removeClass( 'navbar-fixed-top');Unchanged: $nav.removeClass( 'navbar-fixed-top');
Unchanged: }Unchanged: }
Unchanged: }Unchanged: }
Unchanged: });Unchanged: });
Unchanged: &lt;!-- Put this in your stylesheet --&gt;Unchanged: &lt;!-- Put this in your stylesheet --&gt;
Unchanged: .auto-size { width: auto; }Unchanged: .auto-size { width: auto; }
Unchanged: &lt;pre&gt;Unchanged: &lt;pre&gt;
Unchanged: &lt;/script&gt;Unchanged: &lt;/script&gt;
Unchanged: [/html]Unchanged: [/html]
Deleted: &nbsp; 
Deleted: &nbsp; 

Note: Spaces may be added to comparison text to allow better line wrapping.

Tags: , ,

No comments yet.

Leave a Reply