复制Bootstrap的主导航栏和子导航栏

Question

我需要快速搭建 Twitter Bootstrap 的主导航和子导航的功能，例如：http://twitter.github.com/bootstrap/scaffolding.html （当您滚动时，子导航固定在主导航上）。

是否有人已经实现了这个功能或者有相关的教程呢？

- PI.

---

你在那里看到的功能不包含在Bootstrap框架中。他们使用jQuery来确定位置，然后添加或移除“subnav-fixed”类。你可以通过查看http://twitter.github.com/bootstrap/assets/js/application.js并搜索“subnav”来了解他们是如何实现的。 - Jamie Taniguchi

FYI，这个功能应该在v2.1.0中实现。 - yvoyer

Answer 1

这是我实现该功能的代码：

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

- Oleg

---

这会对页面上所有绝对定位的元素产生影响。有没有简单的解决方法？ - Egor Pavlikhin

有没有办法将滚动监听与 Twitter Bootstrap 组件页面上看到的内容集成起来？ - Noz

这个很好用，我只是想理解一下，因为我需要在一个模块中实现它，而不依赖于jQuery - $('.subnav').outerHeight()的目的是什么？这是为了允许额外的主导航吗？我假设offset.top已经是元素的顶部了？ - ForbesLindesay

这不是元素的顶部。这是包括填充和边框的元素高度：http://api.jquery.com/outerHeight/ - Oleg

жҲ‘дёҚеҫ—дёҚе°Ҷ if ($('.subnav').attr('data-top') - $('.subnav').outerHeight() <= ... жӣҝжҚўдёә if ($('.subnav').attr('data-top') + $('.subnav').outerHeight() <= ...пјҢд»ҘйҒҝе…ҚйЎөйқўй«ҳеәҰдёҚи¶іж—¶еҮәзҺ°ж•…йҡңгҖӮ - Matthieu Napoli

Answer 2

截至2012年12月04日，被接受的答案已经不再是最佳选择，因为所需功能已包含在Bootstrap中。 请参见Bootstrap JS的一部分，Affix JavaScript组件

- migajek

---

只是搜索一下 :) 亲爱的stackoverflow朋友们，这确实是今天最正确和最简单的方法，不要尝试以前的技巧。 - woto

起初我同意了，但是我想如果你不使用Bootstrap，那么为了这个功能而包含它就没有意义。除非我漏掉了什么，否则两种解决方案似乎都能实现相同的功能。 - SethMW

@SethMW 这个问题被标记为twitter-bootstrap标签，这意味着它与Bootstrap有关。确实，被接受的答案是一个不错的无需Bootstrap的解决方案，但对于那些使用Bootstrap的人来说，我认为最好使用Bootstrap提供的东西。 - migajek

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/。

- baptme

Answer 4

这里是另一段代码

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

- Jun

Answer 5

上面的两个答案都很好，但我想让大家知道，我已经将其制作成一个模块（不依赖于jQuery），可以在ForbesLindesay/booting-sub-nav中获得。它可以通过脚本标签独立使用，也可以通过https://github.com/component/component/使用。

- ForbesLindesay