問題タブ [scrollspy]

作業中のWebサイトにBootstrap Scrollspyを実装しようとしていますが、何をしても動作しないようです(またはそのために何かをすることはできません)。

ウェブサイトはhttp://thecreativecompany.stage.webcomm.com.au/で見ることができます。

これが私のJavaScriptです：

scrollspy は完璧に動作していますが、ID にプラス記号 (+) が含まれるアイテムもスキップします。ID をトリミングする以外に回避策はありますか? 私は SEO の理由から ID の + 記号を好みます。ID は動的に生成され、他のコードで再利用されるため、この方法を維持することを好みます。

Twitter Bootstrap を使用して最初のレスポンシブ サイトを完成させたところです。scrollspy を使用して、サイトの 5 つのセクション (ホームなど) を上下にスクロールします。このサイトは Firefox と IE では問題なく動作しますが、Chrome と Safari では、Mozilla Firefox と IE のように下部セクションのコンテンツが垂直方向ではなく水平方向に展開されます。

明らかに、それを修正する方法を探しているか、Twitter ブートストラップまたは html5 自体を使用したクロスブラウザーの動作に関して欠落している詳細を探しています。

サイドバーの ul/il リストで Twitter ブートストラップ scrollspy を使用していますが、これはうまく機能します。ただし、サイドバーのリンクをクリックするときは、スムーズ スクロールも使用します。これにより、スクロールスパイは、通常の場合と同様に、表示されるすべての要素を強調表示します。

しかし、サイド ナビゲーションのリンクをクリックしてスクロールがトリガーされた場合、ユーザーは、スクロールが発生したときにメニューがアニメーション化されることを期待しない可能性が高くなります。アニメーション スクロールの実行中に scrollspy を一時的に無効にし、スクロールが完了したら再度有効にする方法はありますか?

ここにフィドルがあります。

この質問でレスポンシブ ナビゲーション メニューの作成に関する問題が説明されているため、2 つの同一のナビゲーション要素が必要です。

.activeただし、両方のクラスを同時に追跡して適用するには、scrollspy を使用したいと思います。簡単にするために、次のような 2 つの同一のナビゲーションがあるとします。

そして、内容：

そして、scrollspy を呼び出します。

アクティブなクラスが台無しになり、両方のナビゲーションで前後にちらつくことがフィドルでわかります。scrollspyただし、いずれかのナビゲーションからクラスを削除すると、もう一方のナビゲーションは正常に機能します。これは修正可能ですか？

Bootstrap 3 を使用しています。Bootstrap サイトのドキュメントにあるサイドバーと同じ機能を再作成したいと考えています。

以下は私のコードで、ここにもあります：http://bootply.com/82119

2 つの問題。

1. 各セクションを過ぎてページを下にスクロールすると、サイドバーの項目が強調表示されません。
2. サイドバーの項目をクリックすると、関連するアンカーにジャンプしますが、コンテンツの半分が表示されません。値を変更data-offsetしても効果がないように見えます。

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

Scrollspy の Jquery スタンドアロン実装を使用しています。ここに私の問題の jsfiddle の例があります: http://jsfiddle.net/2acyu/66/

ページが 3 つのセクションを下にスクロールすると、上部のナビゲーション リンクが強調表示されます。

正常に動作します！

私の問題は、切り替え可能な非表示の要素が必要なことです。追加のコンテンツが表示され、セクションの 1 つが展開されると、scrollspy がスローされます。非表示のテキストを展開してから、下にスクロールしてみてください。コンテナー div のオフセット値が変更されたため、このセクションがページの上部に到達する前に、テキスト 2 へのリンクが強調表示されます。

scrollSpy の Bootstrap バージョンには、この状況を修正するために DOM 内の要素が追加/変更されたときに呼び出すことができる "refresh" メソッドがあります。ただし、私が使用している Scrollspy のスタンドアロン JQuery バージョンはそうではありません。

ここ別のサイトの誰かが次の使用を提案しています:

その後、ウィジェットを再作成します。

しかし、この修正を実装する方法がわかりません。

どんな助けでも感謝します。

ブートストラップ 3 から scrollspy を動作させることができません。stackoverflow の回答を含め、多数のフォーラムから読んだことはすべて試しましたが、成功しませんでした。

したがって、誰かがこのコードを見て助けてくれれば、それは素晴らしいことです。

コードは次のとおりです。

前もって感謝します！！乾杯！

編集: 次の URL で動作していないことを確認できます: http://zumuha.site40.net/bootstrap/examples/starter-template/

乾杯！