Twitterのブートストラップ2.1.0で新しいaffixプラグインを使用する方法

110

そのトピックに関するブートストラップのドキュメントは、少しわかりにくいです。ドキュメントのようにnavbarを付けて同様の動作を実現したい：navbarは段落/ページの見出しの下にあり、下にスクロールすると、最初にスクロールしてページの上部に到達し、そこに固定してさらにスクロールダウンします。 。

：jsFiddleは、ナビゲーションバーのコンセプトでは動作しませんので、私は、最小限の例として使用するために別のページを設定した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>

助けてくれてありがとう。

css  web  twitter-bootstrap  navbar 
— ダイナロン
ソース
あなたはあなたのページのメインのナビゲーションバーでaffix（）を使用しようとしていますか？
— Nithin Emmanuel 2012
@NithinEmmanuelはい、投稿またはサンプルのjavascriptを参照してください：i08fs1.ira.uka.de/~s_drr/navbar.html
— Dynalon
.navbar-fixed-topaffix（）の代わりにuseを使用しないのはなぜですか？
— Nithin Emmanuel 2012
6
@NithinEmmanuelそれは私が欲しいものではないので。.navbar-fixed-topトップにナビゲーションバーを配置しますすべての時間を。ナビゲーションバーの上にページヘッダーが必要です。下にスクロールすると（したがって、ナビゲーションバーがスクロールされなくなる可能性があります）、ページの上部に固定する必要があります。ブートストラップドキュメントは、以前のドキュメントのサブナビゲーションとまったく同じメカニズムを使用していましたが、残念ながら、2.1.0ドキュメントではそれを削除しました。
— Dynalon 2012
1
1つは、JavaScriptのネストが正しくないことです。)};する必要があります});
— オーウェン

回答:

160

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

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

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

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

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

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

最後に、添付された要素が修正されると、その要素はページ上のスペースを占有しなくなり、その結果、その下の要素が「ジャンプ」します。この醜さを防ぐためにdiv、実行時にnavbarと同じ高さに設定したnavbarでラップします。

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

。

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

これが動作中の必須のjsFiddleです。

— ナムオール
ソース
6
「ジャンプ」を削除するための素晴らしいヒント-このアイテムが削除されるという事実を完全に見落とし、私の問題はコードのaffix / js部分に含まれていると考えました。
— Thomas
1
この答えは最高です！すべてが正常に機能します。「ジャンプ」の部分は、私が見つけたほとんどのチュートリアルで欠けている部分でした。ありがとう！
— Ricardo Otero 2013
1
重要な修正の1つ：最初のコードスニペットのjqueryコードで、position（）ではなくoffset（）を使用します。説明：position（）関数は親要素内のオフセットを提供しますが、offset（）はドキュメント内のその位置です。これは実際に必要なことです（そうです、名前は直観に反しています）。したがって、あなたのaffix要素が別の要素の内部にある場合、コードは機能しません。また、次のような「top」値のみを渡す必要があります：$（ "＃nav"）。affix（{offset：{top：$（ '＃nav'）。offset（）。top。そして、ready内にある必要があります（）ブロックして、ページレイアウトが完成したことを確認します
— orrd
ありがとう@orrd-私の答えとフィドルを更新します！
— namuol 2013
いいね！完璧に動作し、非常にスムーズです。ちなみに、同じ例をスティッキーフッターで探しています。それを行う方法を知っている場合、jsFiddleを更新できますか？ありがとう！
— Jocelyn
76

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

このdata-offset-top値は、貼り付け効果を実行するためにスクロールする必要があるピクセルの量です。あなたの場合、一度50pxスクロールすると、アイテムのクラスがから.affix-topに変わります.affix。おそらくユースケースでdata-offset-topおよそ130pxに設定したいと思うでしょう。

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

例：

.affix {
    position: fixed; 
    top: 20px; 
    left: 0px;
}
— デイブ・キス
ソース
1
Thx、それはやや機能します。サンプルページをそのように更新しました。問題は、navbarがcssクラスとして「affix」を取得するとすぐに、navbar cssクラスが破棄されることです。しかし、それは単なるブートストラップのバグ/欠点だと思います。LESSでそれを実行してブートストラップを再構築しないと、簡単に変更できません。
— Dynalon
.navbarクラスが保持されているように見えますが、よろしいですか？
— Dave Kiss
この回答をありがとう、これを理解しようと何年も費やしました
— Reuben
少し改善された、より一般的な解決策については、私の回答を参照してください。
— namuol 2013年
5

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

これがプルリクエストです：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>
— コービンU
ソース
3

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

ブートストラップは、data-attributesほとんどの場合、JavaScript を介して、またはJavaScriptを直接実行するオプションを提供します。

— パトリック・ラフリン
ソース
2

私はこれを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);
});
— イエス・ロドリゲス
ソース
1

スクリプトを削除するだけです。これが私の例です：

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>

  <style>
  #content {
    width: 800px;
    height: 2000px;
    background: #f5f5f5;
    margin: 0 auto;
  }
  .menu {
    background: #ccc;
    width: 200px;
    height: 400px;
    float: left;
  }
  .affix {
    position: fixed;
    top: 20px;
    left: auto;
    right: auto;
  }
  </style>

</head>
<body>
    <div id="content">
        <div style="height: 200px"></div>

        <div class="affix-top" data-spy="affix" data-offset-top="180">
            <div class="menu">AFFIX BAR</div>
        </div>
    </div>
</body>
</html>
— ベコフスキー
ソース
1

解決のためにnamuolとDave Kissに感謝します。私の場合、afflixと折りたたみプラグインを一緒に使用すると、ナビゲーションバーの高さと幅に小さな問題が発生しました。幅の問題は、親要素（私の場合はコンテナー）から継承することで簡単に解決できます。また、ちょっとした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;
  }
}

Coffeescript：

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()
— ヴォルディ
ソース
0

ナビゲーションバーを接続するための私の解決策：

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();
        });
 }
— フロリアン
ソース
0

受け入れられた回答と同様に、次のようなことを行ってすべてを一度に実行することもできます。

$('#nav').affix({
  offset: { top: $('#nav').offset().top }
}).wrap(function() {
  return $('<div></div>', {
    height: $(this).outerHeight()
  });
});​

これは、affixプラグインを呼び出すだけでなく、navbarの元の高さを維持するdiv内の添付要素もラップします。

— エイドリアン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.