我开始进入Twitter-Bootstrap,以帮助我开始制作Web应用程序。我喜欢到目前为止所看到的内容,但是我想拥有一个类似于其文档功能的子导航功能。
例如,在http://twitter.github.com/bootstrap/components.html处有一个子导航栏。我真的很喜欢它滚动到顶部时如何神奇地停留在顶部。另外,我比常规nav-pills
更喜欢样式
我不太清楚是什么导致了这种影响。而且他们的javascript中的这个评论让我有些害怕:
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
// IT'S ALL JUST JUNK FOR OUR DOCS!
最佳答案
虽然我没有使用JavaScript,但是我确实拉了他们的CSS,在我放在一起的引导应用程序上创建了自己的subnav栏。 .subnav
的相关CSS在http://twitter.github.com/bootstrap/assets/css/docs.css中
他们的警告仅表示该JavaScript并非为公众使用而编写,因此可能未经过全面测试或编写得很好。但是,这是用于固定滚动条上的subnav条的javascript:
// fix sub nav on scroll
var $win = $(window)
, $nav = $('.subnav')
, navTop = $('.subnav').length && $('.subnav').offset().top - 40
, isFixed = 0
processScroll()
// hack sad times - holdover until rewrite for 2.1
$nav.on('click', function () {
if (!isFixed) setTimeout(function () { $win.scrollTop($win.scrollTop() - 47) }, 10)
})
$win.on('scroll', processScroll)
function processScroll() {
var i, scrollTop = $win.scrollTop()
if (scrollTop >= navTop && !isFixed) {
isFixed = 1
$nav.addClass('subnav-fixed')
} else if (scrollTop <= navTop && isFixed) {
isFixed = 0
$nav.removeClass('subnav-fixed')
}
}
基本上,当窗口滚动时,此代码检查子导航栏是否已到达窗口的顶部;如果具有,则添加
subnav-fixed
类并设置一个标志。否则,将删除该类并将标志设置为false