jquery - Twitter Bootstrap Affixed Navbar - 下の div が飛び上がる

Question

問題を説明するのはかなり難しいです。このjsFiddleを見てください：

http://jsfiddle.net/xE2m7/

ナビゲーションバーが上部に固定されると、コンテンツはその下にジャンプします。

CSS:

.affix {
    position: fixed;
    top: 0px;
}
#above-top {
    height: 100px;
    background: black;
}

問題はどこだ？

Answer 1

ここでの問題は、ナビゲーション バーが上部に固定されていることを、ナビゲーションの下のコンテナー内の残りのコンテンツに伝える方法がないことです。より最新の CSS を使用してこれを実現できますが、これは古いブラウザーの修正にはならないことに注意してください (実際、古いブラウザーの postion:fixed プロパティにも問題がある可能性があります...

.affix + .container {
    padding-top:50px
}

これは、ナビゲーション バーが修正されるまで待機し、兄弟であるコンテナにパディングを追加して、ナビゲーションの下で「ジャンプ」しないようにします。

Answer 2

@niaccurshiに触発された私の解決策：

padding-top をハードコーディングする代わりに、同じ量のスペースを占有する非表示の複製要素を作成しますが、元の要素が固定されている間だけです。

JS:

var $submenu = $(".submenu");

// To account for the affixed submenu being pulled out of the content flow.
var $placeholder = $submenu.clone().addClass("affix-placeholder");
$submenu.after($placeholder);

$submenu.affix(…);

CSS:

.affix-placeholder {
  /* Doesn't take up space in the content flow initially. */
  display: none;
}

.affix + .affix-placeholder {
  /* Once we affix the submenu, it *does* take up space in the content flow. But keep it invisible. */
  display: block;
  visibility: hidden;
}

Answer 3

コンテンツの重複を避けたい場合の代替手段。

<script>
    jQuery(document).ready(function(){
        jQuery("<div class='affix-placeholder'></div>").insertAfter(".submenu:last");
    });
</script>

<style>
.affix-placeholder {
  display: none;
}
.affix + .affix-placeholder {
  display: block;
  visibility: hidden;
  height: /* same as your affix element */;
  width: 100%;
  overflow: auto;
}
</style>

Answer 4

その上のセクションの周りにヘッダー ラッパーを追加します。そして、これらの要素を組み合わせた高さに等しい min-height をラッパーに与えます。

例：

<div class="header-wrapper" >
   <div class="topbar" >this bar is 36 pixels high</div>
   <div class="menubar">this menubar has a height of 80 pixels</div>
</div>

<div class="" >Your container moving upwards after the affix element becomes fixed</div>

両方の要素の高さ 36 + 80 = 116 。そのためのヘッダー ラッパーの最小の高さは 116 ピクセルにする必要があります。以下を参照してください。

.header-wrapper {
  min-height: 116px;
}

非常にシンプルできちんとしたソリューション