ブラウザ(クロム)を下にスクロールすると、右側の列が左端まで押し込まれ、サイドバーが背景に押し出され、右側のコンテンツはすべて左側のサイドバーの上に表示されます。
これは、接辞プロパティをサイドバーdivに適用した場合にのみ発生します。
以下に示すように、通常の状況では、ページは問題なくレンダリングされます。
ただし、下にスクロールすると、次のようになります。
参考までに、これは私が接辞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フィドルは次のとおりです。
どうすればこれを修正できますか?
ここではいくつかのことが起こっています。最初の問題は、Bootstrapのスキャフォールディングをその接辞機能と組み合わせて使用しようとしていることです。小さい画面では、接辞機能が引き続きアクティブであり、画面を下にスクロールすると、結果セクションの上にオーバーレイされます。
これを修正するには、#myAffix
要素の外側にコンテナDIVを追加し、次にposition: relative !important;
を1200pxに設定されたメディアクエリと組み合わせて使用して、画面幅が小さいデバイスの添付機能を無効にします。
2番目に発生しているのは、固定された要素の固定位置がずれていることです。取り出す
#myAffix{
left: 0px;
}
と追加
.affix{
top: 0px !important;
}
これで、ページの残りの部分とシームレスに連携する固定ナビゲーションバーが左側に表示されます。
すべてを一緒に見るには、 更新されたフィドルの例 をチェックしてください
これがあなたが始めるための何かです: 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 */
}
お役に立てれば!
ほぼ同じナビゲーションバーを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");
}
});
});