web-dev-qa-db-ja.com

Bootstrap 3 affixを使用して、スクロール時にナビゲーションバーの位置を上部に固定

これは私にナッツを運転しています...これは私が釘を打っていないので簡単かもしれません：ヒントを教えてください:-)

Bootstrap 3を使用してサイトの新しいレイアウトを作成します。スクロールするときに、ナビゲーションバーを画面の上部に固定します。

私はそれを機能させましたが、nafbarの下のコンテンツは、接辞クラスが起動するとシフトします。それを回避する方法が見つかりません。

twitter-bootstraptwitter-bootstrap-3offsetnavbaraffix
12
kjaer108

JavascriptまたはHTML5 data-属性の2つのオプションがあります

Via data attributes接辞の動作を任意の要素に簡単に追加するには、スパイする要素にdata-spy = "affix"を追加するだけです。オフセットを使用して、要素の固定を切り替えるタイミングを定義します。

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

JavaScriptを介してJavaScriptを介してaffixプラグインを呼び出します。

  $('#my-affix').affix({
    offset: {
      top: 100
    , bottom: function () {
        return (this.bottom = $('.footer').outerHeight(true))
      }
    }
  })

[〜＃〜]デモ[〜＃〜]http://jsfiddle.net/6P5sF/56/

リファレンス http://getbootstrap.com/javascript/#affix-examples

10
Mo.