jQuery フロントサイド

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

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

必要な物

style.css

index.js

CSSの記述

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

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

jQueryの実装

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

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

 

  • この記事を書いた人

シロー

Webシステムの開発のお仕事をさせて頂いております。 フリーランスの日常、Web開発に関する情報を発信しています。 趣味はゲーム、映画鑑賞、個人サービスを作ることです。

-jQuery, フロントサイド
-

© 2022 Shiro's secret base