ブートストラップ ページで左側の ScrollSpy の例を見てきました。

http://twitter.github.io/bootstrap/2.3.2/javascript.html#scrollspy

しかし、同じスタイルと効果を得る方法のサンプルコードはありませんか? 私が見たすべての JsFiddle の例にはスタイリングがないため、これを達成するために必要な最小コードは何ですか。

アップデート

スクロールバーはページレベルでのみ機能するため、プロジェクトでscrollspyの使用を停止しました。スクロールバーは、スクロールが行われるコンテナーにのみ表示される必要があります

テストのためにここで私の問題の正確なフィドルを作成しました：http://jsfiddle.net/aVBUy/7/

問題は、ナビゲーション バーの項目をクリックすると、要素 ID にスクロールするスクリプトがあることです。そして、ページが正しい位置にあるときにスクロールスパイを使用してナビゲーション要素を強調表示しています。ただし、スクロールスパイは、ブラウザ/デバイスの上部に到達したときにのみアクティブ状態を変更しています。私のナビゲーションバーは固定されているため、scrollspy にオフセットを適用して 51px (ナビゲーションバーの高さ) だけオフセットする必要があります。

私はすべてを試しましたが、うまくいきません。私のフィドルをチェックして、私が間違っている場所を見つけることができるかどうかを確認してください。

これが私の最小化されたコードです...

HTML

CSS

脚本

フィドル

http://jsfiddle.net/aVBUy/7/

ブートストラップ サイトでスクロール スパイを動作させようと試みてきましたが、動作させることができません。私が抱えている問題は、どこにスクロールしても効果がないことです。ここで私が何をしているかを見ることができます。

必要なすべての手順を実行しました。つまり、以下は body タグです

そしてnavもそこにあります：

scrollspy も呼び出しました。

誰でも見て、私が見落としていることや間違っていることを指摘してください。

ブートストラップで scrollspy を使用しようとしていますが、いくつかのエラーが発生しています。エラーコンソールはこれを返し続けます：TypeError: 'undefined' is not an object (evaluating '$.fn')この行であるbootstrap-scrollspy.jsの124行目

これは、ScrollSpy プラグイン定義の下にあります。このjsFiddleから直接取得したコードを使用しています

なぜこれが起こっているのか誰にも分かりますか？

ブートストラップを使用して 1 ページのプロジェクトを開始しましたが、navbar スタイル (my-style) を変更するクラス nav を使用する必要があるため、scrollspy に問題があります。
nav クラスなしで scrollspy を動作させる方法や、bootstrap.min.css を変更せずに最初の nav クラスのプロパティを削除する方法を教えてもらえますか?

これはコードです：

ありがとう。

ブートストラップ nav-pills navbar で scrollspy を使用していますが、アクティブなリンクの色やホバーの色を変更できないようです。私はあらゆる種類の組み合わせを試してきましたが、色を変更できない理由をまだ理解できないようです. 理由はありますか？

CSS

ナビ

http://getbootstrap.com/componentsからまったく同じコードとリソースをコピーしています

ただし、私のコピーだけでは、ページを更新するたびに ul リスト全体がその位置でスタックする理由がわかりません。したがって、下にスクロールすると、ul が画面から消えます。

これは私のバージョンです：

スクロールスパイが動かなくなる

更新しないと、ul が正常に機能し、サブメニューが強調表示されている場所をどこにでもスクロールできます... クラスを設定した JQuery は、activeクラスのサブメニューactiveが正しいため、機能しているようです。これがどのように発生するのかまったくわかりません...どんな助けも大歓迎です! ありがとう！

ノート：

• -。元のサイトで動作します
• -。クロムで動作します
• -。Bootstrap 2.3.2 バージョンは正常に動作します

メディア/ブラウザの幅に応じてトップ ナビゲーション バーの高さが変化するレスポンシブ サイトで Bootstrap の scrollspy を確実に動作させようとしています。したがって、属性のオフセットをハードコーディングする代わりに、次のdata-offsetように Javascript の初期化を通じて動的に設定しています。

幅の広いレイアウト (つまり、Bootstrap -lg) では問題なく動作しますが、幅の狭いレイアウトでは、「累積」オフセットが有効になっているようです。つまり、最初のセクションでは問題なく動作しますが、次のセクションをアクティブにするためにピクセルを増やす必要があります (たとえば、次のセクションでは 90px、3 番目のセクションでは 110px など)。

この回答に記載されているように、scrollspy オブジェクトを直接操作してみました: Bootstrap で ScrollSpy のオフセットを設定するにはどうすればよいですか? しかし、役に立たない。

オフセットがメディアの幅に応じて変化するレスポンシブ サイトで scrollspy を実装する標準的な方法を誰かが推奨できますか?

追加情報：

両方のシナリオで scrollspy オブジェクトを分析したところ、data-属性のみを介して初期化された場合と JS を介して初期化された場合で、オフセットのリストが異なることがわかりました。JS を介して初期化すると、BS 応答調整が発生する前にオフセット配列が設定され、高さが異なるようです。すべてのレスポンシブが実行された後、 scrollspy の初期化をトリガーするにはどうすればよいですか? BS がレイアウトの調整を完了した後、フック/コールバックはありますか? JS も関係していますか、それともすべてのレスポンシブ機能は CSS によって処理されていますか?