web-dev-qa-db-ja.com

Bootstrap列のレイアウトを維持しない接辞

ブラウザ（クロム）を下にスクロールすると、右側の列が左端まで押し込まれ、サイドバーが背景に押し出され、右側のコンテンツはすべて左側のサイドバーの上に表示されます。

これは、接辞プロパティをサイドバーdivに適用した場合にのみ発生します。

以下に示すように、通常の状況では、ページは問題なくレンダリングされます。 enter image description here

ただし、下にスクロールすると、次のようになります。 enter image description here

参考までに、これは私が接辞divを実装する方法です：

<div class="row content-wrapper">
    <div data-spy="affix" data-offset-top="200" data-offset-bottom="200" id="myAffix">
        <div class="col-lg-3">
            <!-- Sidebar code -->
        </div>
    </div>
    <div class="col-lg-9">
            <!-- content -->
    </div>
</div>

問題がライブで発生していることを確認できるように、JSフィドルへのリンクは次のとおりです。

エラーを確認するためのJSフィドルは次のとおりです。

http://jsfiddle.net/fH46S/2/

どうすればこれを修正できますか？

jquerycsstwitter-bootstrapaffix
15
ILikeTacos

ここではいくつかのことが起こっています。最初の問題は、Bootstrapのスキャフォールディングをその接辞機能と組み合わせて使用​​しようとしていることです。小さい画面では、接辞機能が引き続きアクティブであり、画面を下にスクロールすると、結果セクションの上にオーバーレイされます。

これを修正するには、#myAffix要素の外側にコンテナDIVを追加し、次にposition: relative !important;を1200pxに設定されたメディアクエリと組み合わせて使用​​して、画面幅が小さいデバイスの添付機能を無効にします。

2番目に発生しているのは、固定された要素の固定位置がずれていることです。取り出す

#myAffix{
    left: 0px;
}

と追加

.affix{
    top: 0px !important;
}

これで、ページの残りの部分とシームレスに連携する固定ナビゲーションバーが左側に表示されます。

すべてを一緒に見るには、 更新されたフィドルの例 をチェックしてください

6
Lloyd Banks

これがあなたが始めるための何かです： http://jsfiddle.net/panchroma/H2KU7/

それでもrefinememtが必要ですが、重要な部分は完了しています。これの鍵は、接辞を使用する場合よりも、Bootstrap JSは、設定された量のスクロールの後に、スパイしているdivに.affixのクラスを適用します。この接辞クラスにはcssがあります。

position:fixed;

これがdivのスクロールを停止するものです。また、divが通常のフローから外れるため、重なりが発生します。

私の解決策は、左側のサイドバーの周りに新しいdivをラップし、これに接辞動作を適用することでした。元のコードは<div class="col-lg-3">通常の流れから外れ、それが問題の根本でした。

HTML

 <div class="col-lg-3">
    <div class="wrap" data-spy="affix" data-offset-top="200" data-offset-bottom="200" id="myAffix">
       <!-- your nav div here -->
    </div> <!-- close wrap -->
  </div> <!-- close col-lg-3 -->

編集
cssを貼り付けたときの左側の列の動作を調整するには、次のようなもので左側の列をターゲットにします。

.col-lg-3 .wrap.affix{
 /* custom afix padding and styling here */
}

お役に立てれば！

7
David Taiaroa

ほぼ同じナビゲーションバーを2つ設定します。それらの1つには、class = "navbar navbar-fixed-top"、id = "nav_first"、およびstyle = "visibility：hidden;"があります。 。 2つ目はclass = "navbar"とid = "nav_second"です。これらの違いを除いて、これらのナビゲーションバーは完全に同じです。

また、このjsコードをページに追加します。

$(document).ready(function(){
        console.log("document is ready");

        $(document).scroll(function(){
            console.log("hoook");
            var dist = elementOffset = $('#nav_second').offset().top  - $(window).scrollTop();
            console.log("dist: "+dist);
            if(dist<=0){
                $("#nav_first").css("visibility","visible");
            }
            else{

                $("#nav_first").css("visibility","hidden");
            }
        });

    });
0
mustafa kemal tuna