复制引导程序主nav和子nav
复制引导程序主nav和子nav
提问于 2012-02-08 00:14:54
我需要快速提升twitter bootstraps主导航和子导航的功能，例如http://twitter.github.com/bootstrap/scaffolding.html (当你滚动时，子导航就会固定到那个主导航)
有没有人实现了这一点，或者有什么教程？
回答 5
Stack Overflow用户
回答已采纳
发布于 2012-02-13 22:18:53
下面是我实现此功能的代码：
$(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');
});Stack Overflow用户
发布于 2012-12-04 19:40:28
从2012-12-04起，公认的答案不再是最好的选择，因为所需的功能已经包含在Bootstrap中。请参阅Affix JavaScript component，它是Bootstrap JS的一部分
Stack Overflow用户
发布于 2012-06-26 00:23:29
来自@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;
}
}如果您想克隆菜单的样式(包括颜色、边框和效果)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9179708
复制相关文章
相似问题
腾讯云开发者
