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 に答える