問題タブ [scrollspy]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
1761 参照

twitter-bootstrap - Bootstrap ScrollSpy は、スクロール可能な領域がなくなるとセクションをスキップします

選択した要素のスクロール位置に関して、Bootstrap ScrollSpy に問題があります。この問題はページの下部で発生します。ページ全体に比較的短いコンテンツ セクションが複数あります。それらは折りたたまれてonClickで展開されます(そうです、すべて開くことを選択した場合、問題はないようです)。scrollspyによってすべてが選択される前にページの下部に到達すると、navの最後の要素にジャンプします。

スクロール可能な領域がなくなるという問題のようです。(また、余分な空白パディングを追加してデザインを無効にすることはオプションではありません)

ボディに scrollspy を追加しました。ボディには高さの値が追加されていません。オフセットは、強調表示された要素の開始が早すぎた以外は効果がありません。

ここに私のコードの JSFiddle があります: http://jsfiddle.net/Abuu/sAUee/

ここで同様の質問が1つしか見つかりませんでしたが、回答がありませんでした: Bootstrap - Scrollspy scrolling skipping second to last section

前もって感謝します。

0 投票する
1 に答える
7472 参照

jquery - Bootstrap 3 Scrollspy が Affix と Panel で動作しない

ブートストラップ ScrollSpy を接辞 navbar に適用しようとしています。私はすべてを正しくやったと思っているので、何かが欠けています。

これが私のコードです:

リンクと接辞は正しく機能していますが、scrollspy が表示されません。

ここで適応されたjsfiddleを参照してください。

0 投票する
1 に答える
770 参照

javascript - ブートストラップ 3 スクロール スパイ

こんにちは、ナビゲーションでスクロールスパイを動作させようとしていますが、そうではありません。私のサイトへのリンクは次のとおりです

実装方法は次のとおりです。

0 投票する
4 に答える
7805 参照

twitter-bootstrap - 完全な URL を使用した Scrollspy

# アンカー リンクではなく絶対 URL を使用する場合に scrollspy を機能させようとしています。

たとえば、使用するだけで scrollspy を簡単に実行できます<a href="#section1"></a>

を使用してscrollspyを実行できるようにしたい<a href="http://myurl.com/#section1"></a>

これを行う理由は、ホームページのメイン ナビゲーションが scorllspy であるためですが、ブログはホームページの一部ではありません。ブログにアクセスしてからホームページ上の何かへのリンクをクリックするとhttp://myurl.com/blog/#section1、ホームページ ID ではなくにルーティングされます。

私はこの解決策を見つけました(bootstrap scrollspyでurlとhashを使用します)が、完全に機能させることができませんでした。いくつかの微調整と多数の正規表現の組み合わせの後、アクティブなクラスを最初のメニュー項目に追加することができましたが、更新されませんでした。

これを機能させることについて何か考えはありますか?使用する必要がある代替の js ライブラリはありますか?

トロイのおかげで解決

$('body').scrollspy({ target: '.nav-main', offset: 155 })scrollspyをリフレッシュした後にデータオフセットを再適用するために追加しました。試行錯誤の末、これが私が見つけた唯一の解決策です。

0 投票する
2 に答える
1633 参照

javascript - スクロール可能なdivでscrollspyをブートストラップする

Bootstraps ScrollSpy または「スクロールスパイ」タイプのスクリプトを取得して、という名前のスクロール可能な div#reportContainerで動作させようとしています。

1 つはページを削除するための削除ボタンであるため、タグには 2 つのリンクがあります。クラス.pageとのリンクは、私が見たいものです。

誰でも私がこれを機能させるのを手伝ってくれますか?

ナビゲーション

目標

0 投票する
1 に答える
3159 参照

javascript - Bootstrap では、「アクティブな」ナビゲーション要素をどのように識別できますか?

私は Twitter Bootstrap 3.0 を使用しており、ScrollSpyプラグインを使用して、下にスクロールするときに「nav」リンクを有効にしています。ここで、ScrollSpy イベント「activate.bs.scrollspy」に応答して、(window.history.pushstate を使用して) アドレス バーの URL を自動的に更新したいと考えています。

ScrollSpy がアクティブ化した "nav" 要素を特定するにはどうすればよいですか?

私のコードは次のようになります。

0 投票する
1 に答える
3992 参照

jquery - Bootstrap Scrollspy の不適切な強調表示

ブートストラップ scrollspy を統合する WordPress サイトがあります。スクロールすると Scrollspy がアクティブになりますが、navbar で最初の 2 つの項目が正しく強調表示されません。最初のコンテンツ ボックスが他のボックスよりも大きいためにオフセットの問題があるようですが、 body タグと を介してオフセットを追加しましたjQuery('.navbar').scrollspy()padding-top: 100pxページの最初のコンテンツ ボックスにも追加しました。これらの解決策はどれも機能しません。ここで何が欠けていますか?

作業ページ

0 投票する
0 に答える
1895 参照

css - Scrollspy と体の高さ 100%

一部のブラウザーで、Web サイトのブートストラップ scrollspy を修正しようとしています。body 要素の高さが 100% であるため、scrollspy がどこかで機能しないことがわかりました (そして、すでに多くの議論を見てきました)。

この問題で簡単な Web ページを作成しました (Opera 20 ではうまく動作しますが、たとえば Firefox 7 では動作しません)。体の高さを 100% 削除すると、すべてが機能します。問題は、体の高さを 100% にする必要があることです。回避策はありますか?それを修正して body 要素の 100% の高さを維持する方法はありますか? ありがとう!

jsfiddle.net の例: http://jsfiddle.net/eedZL/

CSS:

HTML

JS

0 投票する
1 に答える
122 参照

javascript - BootStrap の scrollspy 構成が 100% で機能しない

私の問題は、BootStrap の scrollspy にあり、正常に動作しません。Web でさまざまな構成をテストしましたが、機能しません。メニューのスクロールがうまくいかない場合、私のサイトで問題を確認できます。

私は BootStrap を初めて使用します。いくつかの可能な解決策を試しました。うまくいけば、私を助けることができます、どうもありがとうございました。

0 投票する
2 に答える
767 参照

jquery - スクロールスパイBootstrapを変更して、ハッシュなしで機能させるにはどうすればよいですか?

スクロールスパイBootstrapを変更して、ハッシュなしで機能させるにはどうすればよいですか?

これは標準的な操作です:

しかし、私はこのように使用したいと思います(ハッシュなし):

可能です?