Replicating Bootstraps main nav and subnav

Question

I need to quickly knock up the functionality of the twitter bootstraps main navigation and sub navigation e.g. http://twitter.github.com/bootstrap/scaffolding.html (when you scroll the subnav becomes fixed to that main navigation)

Has anyone implemented this or are there any tutorials?

Answer 1

Here is my code to implement this feature:

$(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 choise, since the desired functionality has been included into Bootstrap. Please see Affix JavaScript component which is part of Bootstrap JS