复制Bootstraps主导航和子导航

Question

我需要快速敲击twitter bootstraps主导航和子导航的功能,例如http://twitter.github.com/bootstrap/scaffolding.html(当你滚动subnav固定到那个主导航时)

有没有人实现这个或有任何教程？

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

Answer 2

截至2012-12-04,已接受的答案不再是最佳选择,因为所需功能已包含在Bootstrap中.请参阅Affix JavaScript组件,它是Bootstrap JS的一部分

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/