スクロールしても動かないナビゲーションが作りたいな～
こんにちは、ティロといいます
プログラミング好きな理系大学生です
今回は固定されたナビゲーションを作ります。また固定されるナビゲーションのデザインが変わるようにします。
具体的にはこんな感じです。
See the Pen
oNLKZEG by hiro web制作とブログ (@hiroweb9)
on CodePen.
コードは以下の通りです。
一応言っておきますが、コピペOKなので好きに使ってください。
html
1 2 3 4 5 6 7 8 9 10 | <header> <div class="globalnav"> <ul> <li>HOME</li> <li>sample1</li> <li>sample2</li> <li>sample3</li> </ul> </div> </header> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | body { margin: 0; height: 10000px; } .globalnav { width: 100%; padding: 20px 0; background-color: #dcdcdc; } .globalnav ul { list-style: none; font-size: 0; } .globalnav ul li { display: inline-block; font-size: 16px; padding: 3px; margin: 0 5px; } .sticky { background-color: #323232; color: #fff; padding: 10px; position: fixed; } |
1 2 3 4 5 6 7 8 9 10 11 | let globalnav = document.querySelector('.globalnav'); let globalnav_h = globalnav.clientHeight; window.addEventListener('scroll', () => { if (window.scrollY >= globalnav_h+200) { globalnav.classList.add('sticky'); } if (window.scrollY < globalnav_h+200) { globalnav.classList.remove('sticky'); } }) |
javascriptでスクロール量を監視してナビゲーションの高さ＋200pxよりもスクロール量が大きくなったら.stickyというクラスをつけます。
.stickyはナビゲーションのデザインを変更するためにつけます。