css - Twitter のブートストラップ 2.1.0 で新しい接辞プラグインを使用するには?

Question

そのトピックに関するブートストラップのドキュメントは、私には少し混乱しています。接辞 navbar を使用してドキュメントのように同様の動作を実現したい: navbar は段落/ページの見出しの下にあり、下にスクロールすると、最初にページの上部に到達するまでスクロールしてから、さらにスクロールダウンするためにそこに固定する必要があります.

jsFiddle は navbar の概念では機能しないため、最小限の例として使用するために別のページを設定しました: http://i08fs1.ira.uka.de/~s_drr/navbar.html

これをナビゲーションバーとして使用します：

<div class="navbar affix-top" data-spy="affix" data-offset-top="50">
    <div class="navbar-inner">
        <div class="container">
            <div class="span12">
                <a class="brand" href="#">My Brand</a> 
                This is my navbar.
             </div>
        </div> <!-- container -->
    </div> <!-- navbar-inner -->
</div> <!-- navbar -->

私data-offset-topは値0になりたいと思います（バーは一番上に「くっつく」必要があるため）が、50では少なくともいくつかの効果が見られます.

JavaScriptコードも配置する場合：

     <script>
        $(document).ready (function (){
            $(".navbar").affix ();
        });
     </script>

どんな助けでも感謝します。

score 160 · Accepted Answer

私は同様の問題を抱えていましたが、改善された解決策を見つけたと思います。

data-offset-topHTML で指定する必要はありません。代わりに、呼び出すときに指定します.affix()。

$('#nav').affix({
    offset: { top: $('#nav').offset().top }
});

ここでの利点は、data-offset-top属性を更新せずにサイトのレイアウトを変更できることです。これは要素の実際に計算された位置を使用するため、要素をわずかに異なる位置にレンダリングするブラウザーとの矛盾も防ぎます。

CSS を使用して要素を上部に固定する必要があります。さらに、何らかの理由で誤動作する要素があるためwidth: 100%、nav 要素を設定する必要がありました。.navposition: fixed

#nav.affix {
    position: fixed;
    top: 0px;
    width: 100%;
}

最後にもう 1 つ: 固定された要素が固定されると、その要素はページ上のスペースを占有しなくなり、その下の要素が「ジャンプ」します。この醜さを防ぐためにdiv、実行時にナビゲーションバーと同じ高さに設定したでナビゲーションバーをラップします。

<div id="nav-wrapper">
    <div id="nav" class="navbar">
        <!-- ... -->
    </div>
</div>

.

$('#nav-wrapper').height($("#nav").height());

これは、実際の動作を確認するための必須の jsFiddleです。

score 76 · Accepted Answer

これを初めて実装したところ、これが私が見つけたものです。

data-offset-top値は、固定効果を発生させるためにスクロールする必要があるピクセルの量です。あなたの場合、50pxがスクロールされると、アイテムのクラスがからに変更され.affix-topます.affix。おそらく、ユースケースではdata-offset-topaboutに設定したいと思うでしょう。130px

このクラスの変更が発生したら、 class の配置をスタイリングして、要素を css に配置する必要があります.affix。Bootstrap 2.1 ではすでに as が定義.affixされてposition: fixed;いるため、独自の位置値を追加するだけです。

例：

.affix {
    position: fixed; 
    top: 20px; 
    left: 0px;
}

score 5 · Accepted Answer

この問題を修正するために、オブジェクトが添付または解除されたときに jQuery イベントを発行するように添付プラグインを変更しました。

プルリクエストは次のとおりです: https://github.com/twitter/bootstrap/pull/4712

コード: https://github.com/corbinu/bootstrap/blob/master/js/bootstrap-affix.js

そして、これを実行してナビゲーションバーを取り付けます:

<script type="text/javascript">
$(function(){
    $('#navbar').on('affixed', function () {
        $('#navbar').addClass('navbar-fixed-top')
    });

    $('#navbar').on('unaffixed', function () {
        $('#navbar').removeClass('navbar-fixed-top')
    });
});
</script>

score 3 · Accepted Answer

.affix()スクリプトから削除する必要があります。

Bootstrapには、data-attributesほとんどの場合、JavaScriptを介してまたは直接JavaScriptを使用して処理を実行するオプションがあります。

score 2 · Accepted Answer

twitterbootstrap のソースコードからこれを取得しましたが、かなりうまく機能しています。

HTML:

<div class="row">
    <div class="span3 bs-docs-sidebar">
        <ul id="navbar" class="nav nav-list bs-docs-sidenav">
            ...
        </ul>
    </div>
</div>

CSS:

.bs-docs-sidenav {
    max-height: 340px;
    overflow-y: scroll;
}

.affix {
    position: fixed;
    top: 50px;
    width: 240px;
}

JS:

$(document).ready(function(){
    var $window = $(window);
    setTimeout(function () {
        $('.bs-docs-sidenav').affix({
            offset: {
                top: function (){
                    return $window.width() <= 980 ? 290 : 210
                }
            }
        })
    }, 100);
});

score 1 · Accepted Answer

ソリューションを提供してくれた namuol と Dave Kiss に感謝します。私の場合、afflix プラグインと折りたたみプラグインを一緒に使用すると、navbar の高さと幅に小さな問題が発生しました。幅の問題は、親要素 (私の場合はコンテナー) から継承することで簡単に解決できます。また、少しのjavascript（実際にはcoffeescript）でスムーズに折りたたむことができました。トリックは、auto折りたたみトグルが発生する前にラッパーの高さを設定し、後で元に戻すことです。

マークアップ (haml):

#wrapper
  #navbar.navbar
    .navbar-inner
      %a.btn.btn-navbar.btn-collapse
        %span.icon-bar
        %span.icon-bar
        %span.icon-bar

      #menu.nav-collapse
        -# Menu goes here

CSS:

#wrapper {
  width: inherit;
}

#navbar {
  &.affix {
    top: 0;
    width: inherit;
  }
}

コーヒースクリプト:

class Navigation
  @initialize: ->
    @navbar = $('#navbar')
    @menu = $('#menu')
    @wrapper = $('#wrapper')

    @navbar.affix({offset: @navbar.position()})
    @adjustWrapperHeight(@navbar.height())

    @navbar.find('a.btn-collapse').on 'click', () => @collapse()

    @menu.on 'shown', () => @adjustWrapperHeight(@navbar.height())
    @menu.on 'hidden', () => @adjustWrapperHeight(@navbar.height())

  @collapse: ->
    @adjustWrapperHeight("auto")
    @menu.collapse('toggle')

  @adjustWrapperHeight: (height) ->
    @wrapper.css("height", height)

$ ->
  Navigation.initialize()

score 0 · Accepted Answer

ナビゲーションバーを取り付けるための私の解決策:

function affixnolag(){

    $navbar = $('#navbar');
    if($navbar.length < 1)
        return false;

    h_obj = $navbar.height();

    $navbar
        .on('affixed', function(){      
            $navbar.after('<div id="nvfix_tmp" style="height:'+h_obj+'px">');
        })
        .on('unaffixed', function(){
            if($('#nvfix_tmp').length > 0)
                $('#nvfix_tmp').remove();
        });
 }

css - Twitter のブートストラップ 2.1.0 で新しい接辞プラグインを使用するには?

9 に答える 9

Related

Reference