おしゃれなウェブサイトって、だいたいスクロールでナビゲーションが移動したりしますよね。僕のこのサイトもそういうおしゃれな事がしたい！っということで、jQuery+CSSでスクロールによってナビゲーションを移動するような仕組みを作りました。
必要な物
style.css
index.js
CSSの記述
|
1 2 3 4 5 6 7 |
.js-scroll-nav { position: fixed; /*スクロールしてもついてくるように*/ z-index: 2; /*どの要素よりも上になるように指定*/ width: 80%; /*幅を調整*/ top: 0; /*高さの座標を固定*/ left: 10%; /*横の座標を固定*/ } |
JavaScriptでDOM要素に追加するクラスは名は"js-xxxxx"のように"js"[JavaScriptによって、追加される]の接頭語をつけることが多い。
スクロールの位置に応じてこのクラスをつけたり、外したりする
jQueryの実装
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(document).ready(function(){ var $win = $(window); var $nav = $('nav'); var navPos = $nav.offset().top; //要素のページの一番上からの位置 $win.on('load scroll', function() { var value = $(this).scrollTop(); if( value > navPos) { $nav.addClass('.js-scroll-nav'); } else { $nav.removeClass('.js-scroll-nav'); } }); }); |
基本的な部分はこれだけで良い。
後は、CSSを編集して、色を替えたり、アニメーションを追加したりなどすることで、個性あるスクロールナビゲーションの出来上がりだ！