問題タブ [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.
twitter-bootstrap - トップ ナビゲーション バーのスクロールスパイの問題、ページ コンテンツのオーバーレイを修正
最初は上部に固定されていないナビゲーションバーがあります。ここでやろうとしているのは、たとえば150ピクセルのオフセットをスクロールすると、ナビゲーションバーが固定位置で上部に固定され、それを使用することですページの別のセクションにリンクするためのページ内アンカー、および上部に固定された接辞ナビゲーションバーは、ページ内の正しいアンカー領域を強調表示します (scrollspy?)
ここでの問題は、ナビゲーション バーが上部に固定された後、コンテンツの一部がナビゲーション バーの後ろに隠されているため、固定されたナビゲーション バーによってアンカーがページ上の正しい位置に向かわなくなることです。
私はこの問題についてかなり長い間調査しており、本文に padding-top を追加するための多くの提案を見てきましたが、スクロールによって接辞がトリガーされるまで、トップナビゲーションは修正されません。本文にパディングを追加した後も、ナビゲーションが正しく強調表示されない
以下のセクションの解決策を 試しました Bootstrap で ScrollSpy のオフセットを設定するにはどうすればよいですか?
説明が下手なのでスクリーンショットだけ載せておきます。
これは、スクロールして貼り付ける前のスクリーンショットです
これは、ナビゲーション バーが上部に固定された後のスクリーンショットで、ページ コンテンツまでスクロールします。
どのように機能させたいか
以下は私のコードです。
これはコンテンツ領域です
html の残りの部分は、section2、section3、および section4 にラップされたコンテンツです。
私のCSS
JS
twitter-bootstrap - Bootstrap scrollspy が HAML で動作しない
scrollspyBootstrap ライブラリから実装しようとしています。現在、手動でアクティブにしたタブはアクティブのままで、navスクロールまたはクリックしても変更はありません。私は次のものを持っています。何か案は？
jquery - Bootstrap ScrollSpy で body に複数のターゲットを使用する方法
Bootstrap ScrollSpy を複数のナビゲーション、メイン ナビゲーション、および垂直サブナビゲーションで使用したいと考えています。
私は次のような複数のことを試しました:
<body data-spy="scroll" data-target="#main-nav #subnav"><body data-spy="scroll" data-target="#main-nav, #subnav">$('body').scrollspy({target: "#main-nav"});
$('body').scrollspy({target: "#subnav"});$('body').scrollspy({target: "#main-nav"}, {target: "#subnav"});- ラッパー div の配置:
<body data-spy="scroll" data-target="#main-nav"><div data-spy="scroll" data-target="#subnav">
しかし、何もうまくいきませんでした...
どうすればこれを達成できますか？
ありがとうございました！
jquery - ブートストラップの接辞クラスが下にジャンプ
scrollspy プラグインと接辞プラグインを正常に動作させることができましたが、ユーザーがページの下部までスクロールするたびに (小さなブラウザー ウィンドウを使用している場合)、接辞クラスが別のクラスと競合し始め、接辞が状態間でジャンプします。
ここで例を見ることができます: http://devng.sdss.org/results-science/
CSS は次のとおりです。
そしてJS：
答えは私の顔のすぐ前にあると思いますが、私はこれをずっと見つめていました。
twitter-bootstrap - Bootstrap scrollspy が URL ハッシュを追加しないようにする
Bootstrap 3.0 の scrollspy を次のように実装しました。
私は次のように初期化しています：
liスクロールすると期待どおりにアクティブに設定され、リンクを使用してセクションに移動することもできます。問題は、リンクをクリックすると、リンクが URL にハッシュとして追加されることです。mysite.com/#previewDisplay. URLをまったく変更したくありません。
data-parent以前にタブでこれに遭遇したことがあり、解決策が次のようなクリックイベントを設定するか追加するかを忘れてしまいました:
追加data-parentは、タブの場合のように scrollspy に関連するものではなく、上記のクリックイベントにより、リンクがナビゲートされなくなります。
前もって感謝します。
javascript - ヘッダー/ナビゲーションリンクをクリックするまでブートストラップscrollspyが機能します
固定ヘッダー ナビゲーションに scrollspy を使用しようとしていますが、最初にページを読み込んだときに正しく機能します。
ただし、ヘッダーのリンクの 1 つをクリックしてそのセクションにジャンプすると、ページをスクロールしても、クリックしたリンクがアクティブとして表示されなくなります。すべてのリンクがこのように動作します。なぜ最初は機能するのかわかりませんが、クリックすると機能しなくなります。
...
...
また、ページを更新すると、再び正しく機能するようになります。
twitter-bootstrap - コンテンツのタイトルがブートストラップ scrollspy の後ろに隠れる
必要なのは、私たちについてなどのそれぞれのリンクをクリックすると、コンテンツのタイトルが表示されるはずですが、現在のところ、タイトルはナビゲーションメニューの後ろに隠れています..plsは、プロジェクトの時間が非常に少ないのを助けてくれます. #section にパディングを追加すると、適切に表示されますが、全幅の画像の後のページの上に、不要な空白が残ります。
以下はURLです
jquery - Jquery ScrollSpy - サンプル ファイルで動作します - 私が実行すると動作しません
要素が視点に出入りするタイミングを検出できる次のスクリプトを使用しています: https://github.com/thesmart/jquery-scrollspy
著者が提供する例はうまく機能し、そのコードは次のとおりです。
この部分は、基本的に画面上のすべての要素を作成します。
これはすべての要素のスタイルです:
これは、要素が視点に出入りするタイミングをチェックする ScrollSpy スクリプトです。
これまでのところ、例のファイルのすべてが機能しています。今私がやろうとしたことは、自分の要素を手動で入力することです:
次に、同じ ScrollSpy コードを使用しますが、更新して同じ結果が得られるかどうかを確認します。
これは何らかの理由で機能しません。#tile-220 の代わりに、最初のスクリプトで生成された #tile-90 などを使用すると、手動で追加した ID ではなく、うまく機能します。誰が私が欠けているものを理解するのを手伝ってくれますか?
事前にどうもありがとうございました！