ヘッダーアニメーション 上下スクロールに合わせて表示・非表示の切り替え

[ ID : 1263 ]
シルバー
ヘッダーアニメーション 上下スクロールに合わせて表示・非表示の切り替え

概要

【jQuery】画面のスクロールに合わせて挙動するヘッダー。下スクロール時に上方に消え、上スクロール時に再び表示されます。

用途・要件

  • 一定量スクロールすると、発火。(150pxに設定していますが、任意に調整してください。)
  • safariにおいて、最下部までスクロールするとヘッダーが表示されてしまうため、最下部より少し上まではヘッダーを非表示にして対応。(上にスクロールしても非表示のまま)
  • jQuery バージョン3.6.0使用。

検証ブラウザ

  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)
  • Microsoft Edge(最新)
  • IE11

実装方法

コンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

全ての記事を見る

KONOCODEのメリット 無料会員登録