ブートストラップを複製するメインナビゲーションとサブナブ

Question

私はすぐに、メインナビゲーションとサブナビゲーションなどのブートストラップの機能をノックアップする必要があります。 http://twitter.github.com/bootstrap/scaffolding.html（サブナビがスクロールしてメインナビゲーションに固定されたとき）

これを実装した人もいますか、チュートリアルはありますか？ここで

Answer 1

は、この機能を実装するために私のコードは次のとおりです。ここで.subnav

の応答動作を再現したい私のような人々のために@Oleg、

から

$(document).scroll(function(){ 
    // If has not activated (has no attribute "data-top" 
    if (!$('.subnav').attr('data-top')) { 
     // If already fixed, then do nothing 
     if ($('.subnav').hasClass('subnav-fixed')) return; 
     // Remember top position 
     var offset = $('.subnav').offset() 
     $('.subnav').attr('data-top', offset.top); 
    } 

    if ($('.subnav').attr('data-top') - $('.subnav').outerHeight() <= $(this).scrollTop()) 
     $('.subnav').addClass('subnav-fixed'); 
    else 
     $('.subnav').removeClass('subnav-fixed'); 
}); 

Answer 2

グレート回答CSSコード（色、枠線、効果なし）

body { padding-top: 90px; } 
@media (max-width: 980px) { 
    body { 
     padding-top: 0; 
    } 
} 
.subnav { 
    width: 100%; 
} 
@media (max-width: 768px) { 
    .subnav { 
     position: static; 
     top: auto; 
     z-index: auto; 
     width: auto; 
     height: auto; 
    } 
    .subnav .nav > li { 
     float: none; 
    } 
} 
@media (min-width: 980px) { 
    .subnav-fixed { 
    position: fixed; 
    top: 40px; 
    left: 0; 
    right: 0; 
    z-index: 1020; 
    } 
.subnav-fixed .nav { 
    width: 938px; 
    margin: 0 auto; 
    } 
} 
@media (min-width: 1210px) { 
    .subnav-fixed .nav { 
    width: 1168px; 
    } 
} 

偉大な仕事上の

http://jsfiddle.net/baptme/ydY6W/

Answer 3

2つの答え（色、境界線および効果を含む）、メニューのスタイルのクローンを作成したいが、私はちょうど私が、人々は私がにこれを作ったことをお知らせしようと思いましたモジュール（jQuery依存関係なし）はForbesLindesay/booting-sub-navにあります。それはスタンドアロンのスクリプトタグまたはviaで使用できますhttps://github.com/component/component/

Answer 4

2012-12-04現在、適切な機能がBootstrapに組み込まれているため、受け入れられた回答はもはや最善のものではなくなりました。 ブートストラップJS

Answer 5

の一部であるAffix JavaScript componentを参照してくださいすることはここでは別のコード

$(function(){ 
    var 
    $win = $(window), 
    $filter = $('.navbar'), 
    $filterSpacer = $('<div />', { 
     "class": "filter-drop-spacer", 
     "height": $filter.outerHeight() 
    }); 
    $win.scroll(function(){  
    if(!$filter.hasClass('navbar-fixed-top')){ 
     if($win.scrollTop() > $filter.offset().top){ 
     $filter.before($filterSpacer); 
     $filter.addClass("navbar-fixed-top"); 
     } 
    }else if ($filter.hasClass('navbar-fixed-top')){ 
     if($win.scrollTop() < $filterSpacer.offset().top){ 
     $filter.removeClass("navbar-fixed-top"); 
     $filterSpacer.remove(); 
    } 
    } 
    }); 
});