GSAPを使ってスクロール開始で固定ヘッダーを変化させる方法

JavaScript / jQuery
この記事は約1分で読めます。
スポンサーリンク

スクロールイベントはパフォーマンス的によろしくない

スクロール開始でヘッダーが変化するサイトは結構見かけます。

ググるとスクロールイベントを利用したものが多くヒットしますが、スクロールイベントはパフォーマンス的によろしくないということで、できるだけ使わないようにしています。

そこで今回はGSAPを利用したヘッダー変化の実装方法を紹介します。

ScrollTriggerを利用する

まずDEMOから。

簡単に解説しますと、bodyをトリガーにして、ページTOPから1px以上スクロールしたらヘッダーに特定のclassをつけています。

「toggleClass→CSSでヘッダーのプロパティを変更」でなくても、JSに直接プロパティを書いてもよいと思います。

ウィンドウサイズを変更するとbodyの高さが変わると、endのポイントも変わってしまうので、resizeイベントでScrollTriggerをリフレッシュするようにしています。

コメント

タイトルとURLをコピーしました