スクロールトップが制限を超えた場合、クラスが正しく切り替えられない

user8758206

1500(ピクセル?)下にスクロールすると、下部の絶対divが消え、上にスクロールすると(スクロールトップが1500未満に戻る)再び表示されるようにしようとしています。

理由はわかりませんが、スクロールトップが1500を超えると、divがランダムに点滅するようです。消えて、範囲内に戻ると再び表示されます。

エフェクトが誤動作するのはなぜですか?それをなしに表示するクラスに切り替えるだけであるはずです。助けてくれてありがとう。

window.onscroll = function() {if ((window.innerHeight + window.scrollY) >= 1500) {document.getElementById('test').classList.toggle("customstyle")}};
body {
  height: 2000px;
  background: #ccc;
}
.customstyle {display: none}
<body>
<div id="test" style="
    position: fixed;
    bottom: 0;
    background:  red;
    left: 0;
    padding: 20px;
    width: 100%;
    text-align:  center;
">text</div>
  </body>

ガント

クラスを切り替えているため(したがって、1500ピクセルを超えるとスクロールイベントが呼び出されるたびにクラスを追加および削除します)、1500ピクセルを超えたときにクラスを追加し、1500ピクセルを下回ったときにクラスを削除する必要があります。

window.onscroll = function() {
    if ((window.innerHeight + window.scrollY) >= 1500) {
        document.getElementById('test').classList.add("customstyle");
    } else {
        document.getElementById('test').classList.remove("customstyle");
    }
};

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

警告:タイルのメモリ制限を超えました。一部のコンテンツが描画されず、ChromeDriverSeleniumを使用して長いページをレンダリングしているときにスクリーンショットをキャプチャできない場合があります

分類Dev

Altキーを押しながらTabキーを押してプログラムまたはウィンドウを切り替えるか、タスクバーをクリックしても、visibilitychangeイベントがトリガーされない

分類Dev

クラスがプログラムで追加されたときにCSS変換がアニメーション化されない(ただし、Chromeでクラスを切り替えた場合は機能します)

分類Dev

Reactで子がクリックされた場合を除いてクラスを切り替えます

分類Dev

ブートストラップの切り替え可能なタブが正しく機能しない

分類Dev

スクロール時にアクティブクラスが切り替えられない

分類Dev

外部呼び出しが制限時間を超えた場合にスクリプトを終了する方法

分類Dev

ListViewの自動スクロールを切り替えます-ユーザーがインタラクティブにスクロールした場合

分類Dev

Windows 7と比較してWindows 10のパフォーマンスが低い(16ページを超えるスレッドがない場合、ページフォールト処理はスケーラブルではなく、重大なロック競合)

分類Dev

Windows 7と比較してWindows 10のパフォーマンスが低い(16ページを超えるスレッドがない場合、ページフォールト処理はスケーラブルではなく、重大なロック競合)

分類Dev

Windows 7と比較してWindows 10のパフォーマンスが低い(16ページを超えるスレッドがない場合、ページフォールト処理はスケーラブルではなく、重大なロック競合)

分類Dev

Windows 7と比較してWindows 10のパフォーマンスが低い(16ページを超えるスレッドがない場合、ページフォールト処理はスケーラブルではなく、重大なロック競合)

分類Dev

クライアントブーストラップ-セクション 'が'制限を超えています

分類Dev

クリック時にクラスが切り替えられない

分類Dev

リストビューで画像の位置を取得し、リストビューで別の画像がクリックされた場合に切り替える方法

分類Dev

プロローグ:マトリックスが与えられた場合、転置を作成します

分類Dev

マスターグリッドビューチェックボックスが切り替えられたときに、ネストされたグリッドビューチェックボックスが切り替えられない

分類Dev

マスターグリッドビューチェックボックスが切り替えられたときに、ネストされたグリッドビューチェックボックスが切り替えられない

分類Dev

入力ボックスが文字数制限を超えた場合は、スパンタグメッセージを表示してください

分類Dev

wsgiスクリプトでホストされているチャットボットを備えたフラスコアプリ[sqlite3.OperationalError)がデータベースファイルを開くことができない場合のエラー]

分類Dev

親にアクションを設定すると、チェックボックスのスタイルが正しく切り替えられず、更新されたデータが親から子に送信されます

分類Dev

SATAポートでディスクを切り替えた後、Linuxが起動しなくなりました

分類Dev

制限を超えるスナップショットがない場合、参照されているバックアップスナップショットは削除されますか?

分類Dev

PHPでのElasticsearch一括アップロードエラー-インデックスの合計フィールド[1000]の制限を超えました

分類Dev

他のライブラリに切り替えたくない場合、doGetリクエストから「Authentication」ヘッダーを取得するにはどうすればよいですか?

分類Dev

Visual Studioは、デバッグからリリースに切り替えるときにプロジェクトを再構築し、オプションのXMLドキュメントが選択されている場合はその逆になります。

分類Dev

android-「Android」のグーグルマップにクラスターマネージャーを実装しているときに正確な数を取得するにはどうすればよいですか?誰かが持っている場合は適切な答えを教えてください...?

分類Dev

MS CRMワークフローの動的な値がフィールドの制限を超えた場合はどうなりますか?

分類Dev

再帰が繰り返されたため、スタック制限を超えました

Related 関連記事

  1. 1

    警告:タイルのメモリ制限を超えました。一部のコンテンツが描画されず、ChromeDriverSeleniumを使用して長いページをレンダリングしているときにスクリーンショットをキャプチャできない場合があります

  2. 2

    Altキーを押しながらTabキーを押してプログラムまたはウィンドウを切り替えるか、タスクバーをクリックしても、visibilitychangeイベントがトリガーされない

  3. 3

    クラスがプログラムで追加されたときにCSS変換がアニメーション化されない(ただし、Chromeでクラスを切り替えた場合は機能します)

  4. 4

    Reactで子がクリックされた場合を除いてクラスを切り替えます

  5. 5

    ブートストラップの切り替え可能なタブが正しく機能しない

  6. 6

    スクロール時にアクティブクラスが切り替えられない

  7. 7

    外部呼び出しが制限時間を超えた場合にスクリプトを終了する方法

  8. 8

    ListViewの自動スクロールを切り替えます-ユーザーがインタラクティブにスクロールした場合

  9. 9

    Windows 7と比較してWindows 10のパフォーマンスが低い(16ページを超えるスレッドがない場合、ページフォールト処理はスケーラブルではなく、重大なロック競合)

  10. 10

    Windows 7と比較してWindows 10のパフォーマンスが低い(16ページを超えるスレッドがない場合、ページフォールト処理はスケーラブルではなく、重大なロック競合)

  11. 11

    Windows 7と比較してWindows 10のパフォーマンスが低い(16ページを超えるスレッドがない場合、ページフォールト処理はスケーラブルではなく、重大なロック競合)

  12. 12

    Windows 7と比較してWindows 10のパフォーマンスが低い(16ページを超えるスレッドがない場合、ページフォールト処理はスケーラブルではなく、重大なロック競合)

  13. 13

    クライアントブーストラップ-セクション 'が'制限を超えています

  14. 14

    クリック時にクラスが切り替えられない

  15. 15

    リストビューで画像の位置を取得し、リストビューで別の画像がクリックされた場合に切り替える方法

  16. 16

    プロローグ:マトリックスが与えられた場合、転置を作成します

  17. 17

    マスターグリッドビューチェックボックスが切り替えられたときに、ネストされたグリッドビューチェックボックスが切り替えられない

  18. 18

    マスターグリッドビューチェックボックスが切り替えられたときに、ネストされたグリッドビューチェックボックスが切り替えられない

  19. 19

    入力ボックスが文字数制限を超えた場合は、スパンタグメッセージを表示してください

  20. 20

    wsgiスクリプトでホストされているチャットボットを備えたフラスコアプリ[sqlite3.OperationalError)がデータベースファイルを開くことができない場合のエラー]

  21. 21

    親にアクションを設定すると、チェックボックスのスタイルが正しく切り替えられず、更新されたデータが親から子に送信されます

  22. 22

    SATAポートでディスクを切り替えた後、Linuxが起動しなくなりました

  23. 23

    制限を超えるスナップショットがない場合、参照されているバックアップスナップショットは削除されますか?

  24. 24

    PHPでのElasticsearch一括アップロードエラー-インデックスの合計フィールド[1000]の制限を超えました

  25. 25

    他のライブラリに切り替えたくない場合、doGetリクエストから「Authentication」ヘッダーを取得するにはどうすればよいですか?

  26. 26

    Visual Studioは、デバッグからリリースに切り替えるときにプロジェクトを再構築し、オプションのXMLドキュメントが選択されている場合はその逆になります。

  27. 27

    android-「Android」のグーグルマップにクラスターマネージャーを実装しているときに正確な数を取得するにはどうすればよいですか?誰かが持っている場合は適切な答えを教えてください...?

  28. 28

    MS CRMワークフローの動的な値がフィールドの制限を超えた場合はどうなりますか?

  29. 29

    再帰が繰り返されたため、スタック制限を超えました

ホットタグ

アーカイブ