プログラミング

jQueryで実装するスクロールで色が変わるヘッダー

スクロールで色が変わるヘッダー
ユウマ
こんにちは、ユウマ(@yuuuma_11)です。

 

この記事では、jQueryを使ってページをある一定の場所までスクロールした時に、色が変わるヘッダーの作り方をご紹介します。

 

ユウマ
割と多くのサイトで見られるヘッダーデザインです。

 

完成イメージはこちら。

色が変わるヘッダー

 

HTMLとCSSでヘッダーの作成

HTML

 

CSS

 

jQueryを使って画面スクロール時にヘッダーの色を変える

 

最後に

今回は画面スクロールで色が変わるヘッダーの作り方をまとめてみました。

 

ユウマ
jQueryのscrollTop()メソッドの使い方を理解しておけば、色々なことに応用することができるので抑えておくと良いですね!

-プログラミング

Copyright© ユウマのブログ , 2020 All Rights Reserved.