JavaScript(あとCSS)でSticky Navigationを実装しよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、JavaScriptとCSSでSticky Navigationの実装方法を学びました。Sticky Navigationとは、ページをスクロールしても上部に固定化されるNavigation Barのことです。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

CSS版

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次にスタイルを記述しましょう。

ここまで実装すると以下のようになります。

個人的に、以下のスタイルで画像にオーバーレイをかけて少し暗くしている処理が気になったので、後で記事にしてみたいと思います。

また、この時点で、Navbarは上部に固定化されています。

これは、navクラスのスタイルにつけた「position: fixed」で実現しています。

JavaScriptの実装

JavaScriptでは、navクラスがついているHTML要素に「active」クラスをつけてNavibation Barの色を反転します。

要素を取得する

画面操作に必要な要素を取得します。

scrollイベントの登録

ページをスクロールした時にactiveクラスをつけたいので、scrollイベントを登録します。

fixNavは、これから作成する関数です。

反転処理の実装

先ほど定義したfixNavに、Navigation Barの反転処理を実装します。

これで完成です。

おわりに

今回もCSSが難しかったですね。Navbarを簡単に実装したい人は、BootstrapのNavbarも検討に入れるといいと思います。

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す