Replicating Bootstraps main nav and subnav

Question

I need to quickly bring down the functionality of the main navigation and sub-navigation twitter bootstraps, for example. http://twitter.github.com/bootstrap/scaffolding.html (when scrolling, the subnav becomes fixed for this main navigation)

Has anyone implemented this or are there any tutorials?

Answer 1

Here is my code to implement this function:

$(document).scroll(function(){ // If has not activated (has no attribute "data-top" if (!$('.subnav').attr('data-top')) { // If already fixed, then do nothing if ($('.subnav').hasClass('subnav-fixed')) return; // Remember top position var offset = $('.subnav').offset() $('.subnav').attr('data-top', offset.top); } if ($('.subnav').attr('data-top') - $('.subnav').outerHeight() <= $(this).scrollTop()) $('.subnav').addClass('subnav-fixed'); else $('.subnav').removeClass('subnav-fixed'); }); 

Answer 2

As of 2012-12-04, the accepted answer is no longer the best choice, since the desired functionality was included in Bootstrap. See Affix JavaScript component that is part of Bootstrap JS

Answer 3

Great answer from @Oleg,

For people like me who want to reproduce responsive .subnav behavior

Here is the css code (without colors, borders and effects)

 body { padding-top: 90px; } @media (max-width: 980px) { body { padding-top: 0; } } .subnav { width: 100%; } @media (max-width: 768px) { .subnav { position: static; top: auto; z-index: auto; width: auto; height: auto; } .subnav .nav > li { float: none; } } @media (min-width: 980px) { .subnav-fixed { position: fixed; top: 40px; left: 0; right: 0; z-index: 1020; } .subnav-fixed .nav { width: 938px; margin: 0 auto; } } @media (min-width: 1210px) { .subnav-fixed .nav { width: 1168px; } } 

If you want to clone a menu style (including colors, borders and effects)

http://jsfiddle.net/baptme/ydY6W/

Answer 4

The two answers above work fine, but I just thought I'd let people know that I did it in a module (no jQuery dependency) available in ForbesLindesay / booting-sub-nav . It can be used standalone with a script tag or through https://github.com/component/component/

Answer 5

Here is another code

 $(function(){ var $win = $(window), $filter = $('.navbar'), $filterSpacer = $('<div />', { "class": "filter-drop-spacer", "height": $filter.outerHeight() }); $win.scroll(function(){ if(!$filter.hasClass('navbar-fixed-top')){ if($win.scrollTop() > $filter.offset().top){ $filter.before($filterSpacer); $filter.addClass("navbar-fixed-top"); } }else if ($filter.hasClass('navbar-fixed-top')){ if($win.scrollTop() < $filterSpacer.offset().top){ $filter.removeClass("navbar-fixed-top"); $filterSpacer.remove(); } } }); });