IT技術にまつわる実験ノート

「長編を書くより、短編を数多く完成させてください。それが上達への近道です」 by 手塚治虫

スクロールして Sticky になる Navbar を作ってみる

はじめに

ここでは以下の動画を参考にして、スクロールして Sticky になる Navbar を作ってみることにする。

 

作ってみる

html ファイルを作成して、Bootstrap4 の Starter Template をコピペする。

 

html を記述する。.navbar の上に #header 要素を作成しておく。.navbar は Bootstrap の Navbar からコピペする。

f:id:matt-note:20190322170436p:plain

 

CSS を記述する。

f:id:matt-note:20190322170611p:plain

 

JavaScript を記述する。

f:id:matt-note:20190322171752p:plain

-> #header 要素の高さと、ウィンドウのスクロール量を比較して、.navbar 要素に .fixed を追加したり削除したりする処理を記述する。ウィンドウのスクロール量は、自然に Sticky するように調整しておく。

f:id:matt-note:20190322170958g:plain