Javascript 复制引导主导航和子导航

我需要快速启动twitter引导主导航和子导航的功能，例如（当您滚动子导航时，子导航将固定到该主导航）

---

是否有人实现了此功能，或者是否有教程？

以下是我实现此功能的代码：

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

$（文档）。滚动（函数（）{
//如果未激活（没有“数据顶部”属性）
if（！$（'.subnav'）.attr（'data-top'））{
//如果已经修复，则不执行任何操作
if（$（'.subnav'）.hasClass（'subnav-fixed'））返回；
//记住最高的位置
变量偏移量=$（'.subnav'）.offset（）
$（'.subnav'）.attr（'data-top'，offset.top）；
}
如果（$（'.subnav'）.attr（'data-top'）-$（'.subnav'）.outerHeight（）来自@Oleg的好答案

对于像我这样想要复制.subnav响应行为的人

这是css代码（没有颜色、边框和效果）

如果要克隆菜单的样式（包括颜色、边框和效果）

上面的两个答案非常有效，但我只是想让大家知道我已经将其制作成了一个模块（没有jQuery依赖项）可在上获得。它可以与脚本标记单独使用，也可以从2012-12-04起通过
使用。接受的答案不再是最佳选择，因为所需的功能已包含在引导中。
请看哪个是引导JS的一部分这里是另一个代码

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

$（函数（）{
变量
$win=$（窗口），
$filter=$（'.navbar'），
$filterSpacer=$（''{
“等级”：“过滤器滴隔器”，
“高度”：$filter.outerHeight（）
});
$win.scroll（函数（）{
if（！$filter.hasClass（'navbar-fixed-top'））{
如果（$win.scrollTop（）>$filter.offset（）.top）{
$filter.before（$filterSpacer）；
$filter.addClass（“导航条固定顶部”）；
}
}else if（$filter.hasClass（'navbar-fixed-top'））{
if（$win.scrollTop（）<$filterSpacer.offset（）.top）{
$filter.removeClass（“导航条固定顶部”）；
$filterSpacer.remove（）；
}
} 
});
});
您看到的功能未包含在引导框架中。他们使用jQuery确定位置，然后添加或删除“subnav fixed”类。您可以通过签出并搜索“subnav”来了解他们是如何操作的仅供参考，此功能应该在中实现，这会影响页面上所有绝对定位的项目。有没有简单的方法？有没有一种方法可以将scrollspy与Twitter引导组件页面上看到的功能集成？这很好，我只是想理解它，因为我需要在一个模块中实现它，在不依赖jQuery的情况下，
$（'.subnav'）.outerHeight（）
的目的是什么？这是为了允许额外的主导航吗？我假设
偏移量。top
将已经是元素的顶部了？它不是元素的顶部。这是元素的高度，包括填充和边框：如果($（'.subnav'）.attr（'data-top'）-$（'.subnav'）.outerHeight（）仅搜索它：）亲爱的stackoverflow freands，这确实是今天最正确、最简单的方法，不要尝试以前的技巧。起初我同意，但我想如果你不使用Bootstrap，那么仅仅为了这个功能就包含它是没有意义的。除非我遗漏了什么，否则这两个解决方案的功能似乎是相同的。@SethMW这个问题被标记为twitter Bootstrap t事实上，公认的答案是很好的无引导解决方案，但对于那些使用引导的人来说，我相信最好使用引导提供的东西。
$(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();
    }
    } 
  });
});