复制引导主导航和subnav

我需要快速敲开twitter bootstraps主导航和子导航的function，例如http://twitter.github.com/bootstrap/scaffolding.html （当你滚动subnav成为固定的主导航）

有没有人执行此或有任何教程？

Answer 1

这是我的代码来实现这个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

截至2012年12月4日，接受的答案不再是最好的select，因为所需的function已被纳入Bootstrap。 请参阅作为Bootstrap JS一部分的附加JavaScript组件

Answer 3

@Oleg的最佳答案，

对于像我这样想重现.subnav响应行为的人

这是CSS代码（没有颜色，边界和效果）

 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; } } 

如果你想克隆菜单的风格（包括颜色，边界和效果）

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

Answer 4

上面的两个答案很好，但我只是想让人们知道，我已经把它做成了一个模块（没有jQuery依赖），可以在ForbesLindesay / booting-sub-navfind 。 它可以单独使用脚本标记或通过https://github.com/component/component/

Answer 5

这是另一个代码

 $(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(); } } }); });