jQuery フロントサイド

jQueryでスクロールに応じて、ナビゲーションを移動する方法

おしゃれなウェブサイトって、だいたいスクロールでナビゲーションが移動したりしますよね。僕のこのサイトもそういうおしゃれな事がしたい!っということで、jQuery+CSSでスクロールによってナビゲーションを移動するような仕組みを作りました。

必要な物

style.css

index.js

CSSの記述

JavaScriptでDOM要素に追加するクラスは名は"js-xxxxx"のように"js"[JavaScriptによって、追加される]の接頭語をつけることが多い。

スクロールの位置に応じてこのクラスをつけたり、外したりする

jQueryの実装

基本的な部分はこれだけで良い。

後は、CSSを編集して、色を替えたり、アニメーションを追加したりなどすることで、個性あるスクロールナビゲーションの出来上がりだ!

 

-jQuery, フロントサイド
-

© 2023 Shiro's secret base