問題タブ [scrollspy]

私は最近いくつかの学習を行っており、ブートストラップはその一部です。scrollspyを使用するのに適していると思ったシンプルな（しかし長い）Webページがありますが、何も正しく動作しませんでした。機能するものから始めようと思いましたが、それでも問題がありました。主な問題は、テキストと scrollspy が重なっていたことです。多分それは私が台無しにしたものだと思いました。

そう...

すぐに使える MVC 4 サイトを作成しました。SOの他の誰かの厚意により、この簡単な例http://jsfiddle.net/panchroma/rWYQu/を見つけ、About.cshtmlページのコンテンツをhtmlコードに置き換え、cssデータに対応するためにその直前にセクションを追加しました。これは私が持っているものです:

見よ！以前に編集したページで取得していたものとまったく同じものを取得しました: scrollspy とコンテンツが重複しています。バージン MVC4 アプリにドロップされたときの作業サンプルが正しく機能しません。修正が何であるか正確にはわかりません（私はまだ学んでいます）。

修正は何ですか？

Omを ScrollSpy で動作させたいのですが。

私は現在このコードを使用しています：

現在、Om/React.js が DOM を再レンダリングするまでは動作するようです。その後、ScrollSpy は動作を停止します。私はその理由を知っていると思います。Bootstrap ScrollSpyによると、「スクロールスパイを DOM からの要素の追加または削除と組み合わせて使用​​する場合は、次のように更新メソッドを呼び出す必要があります。」

私は何をすべきか？上記のように、Om にフックして、ScrollSpy を呼び出すように指示したいと思います。

scrollspy ブートストラップ効果を使用しています。ここに例がありますhttp://jsbin.com/huhavejipepi/1/edit?html,css,js

ユーザーがページの上部でサイトをナビゲートしている場合、scrollspy 効果を無効にする必要があります。ただし、この例からわかるように、ホーム セクションが表示されていない場合でも、バーの上部にあるリンクはアクティブに見えます。多分それはバグですか？回避策はありますか?

scrollspy を使用して、必ずしも設計されていないことをしたいのですが、それでうまくいくかもしれません。

私は div を持っていて、それが一番上にスクロールしたときを検出し、そうするたびに何かをし#myTargetたいだけです。.container

HTML:

JS:

ここにjsfiddleリンクがあります

PS jQuery Waypointsなどの他のプラグインを使用できることはわかっていますが、可能であれば Bootstrap だけに固執したいと思います。

長いページを作成していて、誰かがページをスクロールしているときにナビゲーション バーのタブがアクティブになるようにします。Bootstrap 3 を使用しているので、scrollspy が機能すると思いました。しかし、私はそれを機能させることができません。以下は私のコードです。助けていただければ幸いです:)

ナビゲーションバーのコード

application.html.erb ファイルのスニペット

本文のCSS

application.js ファイル

HTML (セクションに ID があり、nav がそれらのリンクにリンクしていることを示すためのスニペット)

テンプレートを使用しています。ページに flexslider を 2 回実装しました。しかしその後、scrollspy で問題が発生しました。ここまたはウェブで見つけたすべての解決策を試しましたが、まだうまくいきません。問題は、ナビゲーションメニューから「ミッション」を選択すると、適切なセクションにスクロールされますが、前のボタン「テクノロジー」がアクティブになり、強調表示されます。他のセクションについても同様です。ミッションをクリックした後、手動でもう少しスクロールすると、アクティブになります。ここで問題を確認できます

次のコードで、オフセット値とフレックススライダーの高さ (技術セクションはこちら) を変更してみました。誰でもこれを手伝ってもらえますか？FlexSlider のバージョンは v2.2.0 です