ページを上下にスクロールして、上部のナビゲーションの位置を変更します

最近、他の Web サイトでも実装されている、デザイナーからのデザイン効果の要件に遭遇しました。

state1: Web ページが下にスクロールすると、ページのヘッダー バーが消え、上部のナビゲーションが上に移動します。 state2: Web ページが上に上がったとき スクロールすると、ページ ヘッダー バーが表示され、上部のナビゲーションがナビゲーションに沿って下に移動します。

ページには既に次の機能が含まれています:

1. ポップアップ ウィンドウが表示されると、ポップアップ ウィンドウ レイヤーはスクロールできますが、ページ レイヤーはスクロールできません。このとき、ページ内の body 要素と html 要素のオーバーフロー スタイル属性は hidden に設定されます

ページの構造は次のとおりです。 header>head

• ナビゲーション 1
• ナビゲーション 2footer>

  ページの下部

  発生した問題: スクロールイベントがあまりにも頻繁に監視されるため (ほぼモバイル 各ピクセルがリッスン イベントを実行する必要があります)、そのため要素が表示または非表示になるときにちらつきの問題が発生し、場合によっては一部の要素が前後に切り替わることさえあります。

  このような問題を解決する過程で、私の解決策のアイデアは次のとおりです:

  1. ドキュメントのスクロールダウンイベントとスクロールアップイベントをそれぞれ監視します

  2. 監視プロセス中に、ポップが発生したときにリッスンしないでください。

  3. リスニング イベントの外側で 2 つの変数を宣言します。つまり、permitMonitorScrollDown = true、permitMonitorScrollUp = true

  (1)。現在ポップアップ ウィンドウが表示されない場合は、permitMonitorScrollDown の値が true であるかどうかを判断し、true である場合は待機プロセスを終了し、permitMonitorScrollDown を false に設定します。 state1 にタイマーを設定し (js には setTimeout 関数が付属しています)、2000 ミリ秒後に allowedMonitorScrollDown を true に戻します。この設定は、2 秒ごとにスクロールダウン イベントに対して 1 つのリスナーを許可するのと同じです。ここにはもう 1 つの隠れたポイントがあります。ページが下にスライドしたときに、状態自体が state1 である場合、その状態に対して操作は実行されません。

  (2) ドキュメントの上方向のスクロールを監視するプロセスで、現在ポップアップウィンドウが表示されていない場合は、permitMonitorScrollUp の値が true であるかどうかを判断し、 false の場合は、直接リターンして監視プロセスを抜けます。 ; true の場合は、permitMonitorScrollUp を false に設定し、状態を state2 に切り替えます。タイマー (js に付属の setTimeout 関数) を設定し、2000 ミリ秒後に permitMonitorScrollUp を true に戻します。この設定は、スクロールダウン イベントを 2 秒ごとにリッスンできるようにするのと同じです。ここにはもう 1 つの隠れたポイントがあります。ページが上にスライドするときに、状態自体が state2 である場合、その状態に対して操作は実行されません。

  5. 上記 2 つの状況が発生する断続的な期間を補うには、ページ スクロール バーが上部または下部に達しているため、タイマーを使用してこれら 2 つの極端な状況を個別に処理する必要があります。

  (1)、ページが最上部に到達します (ポップアップ ウィンドウは表示されず、ドキュメントのスクロールトップは 0)、状態は state1 に切り替える必要があります。

  (2)、ページは最下部に達します (ポップは表示されません)。 -up ウィンドウがポップアップし、ドキュメントのスクロールトップが 0 に等しい) $(window).height() の合計が $(document).height()) に等しい場合、状態は state2 に切り替える必要があります。

  私はjqueryのフィルター関数を使用しました。これは主にポップアップウィンドウがポップアップするかどうかを決定するために使用されます（同等の方法があります：本体のスクロールバーの長さが高さと同じである場合）。スクロール バー自体の場合、排他ロックの概念を使用しながら、ポップアップ ウィンドウが表示されたことを意味します。プログラム。

  以上がページを上下にスクロールして、上部のナビゲーションの位置を変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。