問題タブ [affix]

私はブートストラップ 3 (現在のバージョン) を使用しています。

affix-PlugIn を使用してナビゲーションを作成しようとしています。特定のナビゲーション リンクの上にいる限り、リンクのクラスは「affix-top」であり、この特定のリンクの下にスクロールすると、クラスは「affix-bottom」に変わるはずです。

ただし、「接辞-下」クラスは表示されません。

事実は次のとおりです。

-> 非常に長いサイドバー ナビゲーションがあります。

-> すべてのサイドバー ハイパーリンクは、ページの別のセクションにリンクしています。

-> data-spy="affix" data-offset-top="60" data-offset-bottom="200"をすべての <li> 要素に追加しました。

ここで、下にスクロールしてChromeまたはFirefoxですべてのナビゲーションリンクを調べると、特定のリンクまで下にスクロールすると、affix.js-pluginが「クラス」属性を class="affix-top から変更することがわかります" to class="affix" (これはまさに私が期待するものです)。

しかし：

さらに下にスクロールすると、class-Attributes が class="affix- bottom " に変わりません。

-

私は何を間違っていますか？

または、これは Bootstrap のバグですか?

scrollspy プラグインと接辞プラグインを正常に動作させることができましたが、ユーザーがページの下部までスクロールするたびに (小さなブラウザー ウィンドウを使用している場合)、接辞クラスが別のクラスと競合し始め、接辞が状態間でジャンプします。

ここで例を見ることができます: http://devng.sdss.org/results-science/

CSS は次のとおりです。

そしてJS：

答えは私の顔のすぐ前にあると思いますが、私はこれをずっと見つめていました。

わかりました、これが私が尋ねようとしているものの例です。usatodayのナビゲーション バーです。

ブートストラップ接辞を使用しています。これが私のコードです

JavaScript

前述のサイトのように、div を上部に固定するにはどうすればheader-2よいですか (スクロールがあり、divheader-2が上部に到達した場合)。

header-1とを見たいのですheader-2が、一部のスクロールは非表示になり、一番上header-1にくっつくはずです。header-2

ありがとう

ブラウザのサイズが小さくなると折りたたまれる静的なナビゲーションがあります。(ブートストラップ 3 ナビゲーション)

今、私はそこにもロゴを持っています。折りたたまれたナビゲーションをユーザーと一緒に下にスクロールしたいのですが、それは機能しています。私はそれにアフィクスを使用しています。しかし、今はロゴを非表示にしたいです。折りたたまれたナビゲーションがスクロールしている間、ロゴを修正する必要があります。私が理解した唯一のことは、いくつかのピクセルを下にスクロールした後にロゴをフェードアウトさせることです. 誰でもアイデアを得ましたか?? HTMLコードは次のとおりです。