Twitterのブートストラップでスクロール位置に基づいてDOMを更新しますか？

Question

このページを見ると：http://twitter.github.com/bootstrap/components.html

サブメニューとその位置に注意してください。今すぐスクロールしてください。私は彼らがscrollspyプラグインでそれを実装したと仮定しましたが、私はそれを行う方法を理解できないようです、私はリスト要素がアクティブなクラスを持っている更新です。

任意の助けもいただければ幸いです:)

Answer 1

をあなたはそれが、ダウンロードに含まれているかのように、それは見ていない、application.jsファイル内のコードのこのビットを見つけることができます。それはちょうど

// fix sub nav on scroll 
var $win = $(window) 
    , $nav = $('.subnav') 
    , navTop = $('.subnav').length && $('.subnav').offset().top - 40 
    , isFixed = 0 

processScroll() 

$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') 
    } 
} 

をクローム

にコードを通じて段階、funnily十分ヘッダコメントは、これはそれをテストしていない...私は信じて力仕事をする部分である

// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT 
// IT'S ALL JUST JUNK FOR OUR DOCS! 
// ++++++++++++++++++++++++++++++++++++++++++ 

読み込み...利用可能hereです

Answer 2

CCBlackburnの回答は、必須のスタイルシートがありませんが、近くにあります。後世のために、私はまた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') 
    } 
} 

スタイルシート

/* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */ 
@media (min-width: 980px) { 
    .subnav-fixed { 
    position: fixed; 
    top: 40px; 
    left: 0; 
    right: 0; 
    z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */ 
    border-color: #d5d5d5; 
    border-width: 0 0 1px; /* drop the border on the fixed edges */ 
    -webkit-border-radius: 0; 
     -moz-border-radius: 0; 
      border-radius: 0; 
    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); 
     -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); 
      box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); 
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */ 
    } 
    .subnav-fixed .nav { 
    width: 938px; 
    margin: 0 auto; 
    padding: 0 1px; 
    } 
    .subnav .nav > li:first-child > a, 
    .subnav .nav > li:first-child > a:hover { 
    -webkit-border-radius: 0; 
     -moz-border-radius: 0; 
      border-radius: 0; 
    } 
} 

/* LARGE DESKTOP SCREENS */ 
@media (min-width: 1210px) { 

    /* Update subnav container */ 
    .subnav-fixed .nav { 
    width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */ 
    } 

} 

：とにかく、私はそれは、以下のものを使用して作業しました