0

我开始使用 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!
4

1 回答 1

2

虽然我没有使用 javascript，但我确实提取了他们的 CSS，在我放在一起的引导应用程序上创建了我自己的子导航栏。相关的 CSS.subnav位于http://twitter.github.com/bootstrap/assets/css/docs.css

他们的警告只是意味着 javascript 不是为公共消费而编写的，因此它可能没有经过全面测试或编写得很好。但是，这是用于修复滚动条上的子导航栏的 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

于 2012-07-06T20:00:05.680 回答