1

ヘッダーの下に配置されたシンプルなナビゲーションバーがあります。使用がヘッダーを超えてスクロールしたときに、ナビゲーションバーを固定したい。

問題は、ユーザーがオフセットに到達すると、ナビゲーション バーが固定されますが、ナビゲーション バーの高さ + 適用される 20 ピクセルの下部マージンに対してページがスクロールされるように見えることです。

http://jsfiddle.net/WzphN/

この例は、ヘッダーがこのようなタイトルではなく、応答性の高いカルーセルであることを除いて、私が取り組んでいるものとほとんど同じように見えます。

レスポンシブなので、Javascrip を使用して接辞効果を起動しました。

        $('#nav').affix({
        offset : {  
            top : function() { 
                return $('#header').height(); 
                }
         }  
     });

私が理解しているのは、ブラウザーがヘッダーの高さ (私の例では 500) を超えてスクロールすると、#nav 要素が接辞クラスに適用されるということです。でもなんでこんなに飛び降りるの？

4

1 に答える 1

2

.affixCSS のクラスにtop: {heightofyournavbar} を設定する必要があります。

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

関連項目: Bootstrap3 Affix の data-offset-bottom

于 2013-10-09T07:06:15.703 に答える