我开始进入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

07-24 09:38
查看更多