![](https://konocode.jp/wp-content/uploads/2023/10/image_id12303.gif)
【Vanilla.js】ヘッダーアニメーション 上下スクロールに合わせて表示・非表示の切り替え
画面のスクロールに合わせて挙動するヘッダー。下スクロール時に上方に消え、上スクロール時に再び表示されます。
23 件中 1〜20件目 を表示
画面のスクロールに合わせて挙動するヘッダー。下スクロール時に上方に消え、上スクロール時に再び表示されます。
【パス会員限定】使用頻度が高い基本的なSPメニュー付きのfixedヘッダーレイアウトを実装。SPメニュー開閉処理(フェード)、SPメニューを開いた際の背景スクロール禁止処理、SPメニュー内のページ内リンクをクリックした際にメニューを閉じる処理のJS(jQuery)も記載。
重なる背景によって文字や画像の色が変化するheaderをmix-blend-modeを使用して実装する方法を紹介。
ページ上部から一定量スクロールした際に、ヘッダーの高さなどのスタイルを変更する方法をIntersection Observer APIを使用して実装する方法を紹介。
ヘッダー等に設置されることの多い「フォントサイズ変更ボタン(大・中・小)」を設置する方法について。
画面のスクロールに合わせて挙動するヘッダー。下スクロール時に上方に消え、上スクロール時に再び表示されます。
メニューを階層ごとに展開できるヘッダーメガメニューの実装。
PC時は横に階層が展開、SP時は階層が上に被さっていく。
ヘッダー等に設置されることの多い「フォントサイズ変更ボタン(大・中・小)」の機能をJavaScriptを使用して実装する。
【パス会員限定】横からスライドして開閉するSPメニュー付きのfixedヘッダーレイアウト。
【パス会員限定】フェードで開閉するSPメニュー付きのfixedヘッダーレイアウト。
【パス会員限定】スライドダウン/アップで開閉するSPメニュー付きのfixedヘッダーレイアウト。
【パス会員限定】使用頻度が高い基本的なSPメニュー付きのfixedヘッダーレイアウトを実装。SPメニュー開閉処理(横からスライド)、SPメニューを開いた際の背景スクロール禁止処理、SPメニュー内のページ内リンクをクリックした際にメニューを閉じる処理のJS(jQuery)も記載。
CSSのposition: fixed; ではなくposition: sticky;を使用して固定ヘッダーを実装する方法を紹介。