こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
<目次>
実装するもの
今回は、JavaScriptとCSSでSticky Navigationの実装方法を学びました。Sticky Navigationとは、ページをスクロールしても上部に固定化されるNavigation Barのことです。
demoは「こちら」で確認できます。
環境構築
簡単な環境構築をお願いします。
必要なファイルは、以下の通りです。
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
CSS版
ページ(HTML)の作成
最初にページを作成しましょう。
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 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Sticky Navigation</title> </head> <body> <nav class="nav"> <div class="container"> <h1 class="logo"><a href="/index.html">My Website</a></h1> <ul> <li><a href="#" class="current">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> <div class="hero"> <div class="container"> <h1>Welcome To My Website</h1> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, consequuntur?</p> </div> </div> <section class="container content"> <h2>Content One</h2> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione dolorem voluptates eveniet tempora ut cupiditate magnam, sapiente, hic quo in ipsum iste soluta eaque perferendis nihil recusandae dolore officia aperiam corporis similique. Facilis quos tempore labore totam! Consectetur molestiae iusto ducimus error reiciendis aspernatur dolor, modi dolorem sit architecto, voluptate magni sunt unde est quas? Voluptates a dolorum voluptatum quo perferendis aut sit. Aspernatur libero laboriosam ab eligendi omnis delectus earum labore, placeat officiis sint illum rem voluptas ipsum repellendus iste eius recusandae quae excepturi facere, iure rerum sequi? Illum velit delectus dicta et iste dolorum obcaecati minus odio eligendi!</p> <h3>Content Two</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur provident nostrum possimus inventore nisi laboriosam consequatur modi nulla eos, commodi, omnis distinctio! Maxime distinctio impedit provident, voluptates illo odio nostrum minima beatae similique a sint sapiente voluptatum atque optio illum est! Tenetur tempora doloremque quae iste aperiam hic cumque repellat?</p> </section> <script src="script.js"></script> </body> </html> |
このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾
次にスタイルを記述しましょう。
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
@import url('https://fonts.googleapis.com/css?family=Open+Sans'); * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Open Sans', sans-serif; color: #222; padding-bottom: 50px; } .container { max-width: 1200px; margin: 0 auto; } .nav { position: fixed; background-color: #222; top: 0; left: 0; right: 0; transition: all 0.3s ease-in-out; } .nav .container { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; transition: all 0.3s ease-in-out; } .nav ul { display: flex; list-style-type: none; align-items: center; justify-content: center; } .nav a { color: #fff; text-decoration: none; padding: 7px 15px; transition: all 0.3s ease-in-out; } .nav.active { background-color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .nav.active a { color: #000; } .nav.active .container { padding: 10px 0; } .nav a.current, .nav a:hover { color: #c0392b; font-weight: bold; } .hero { background-image: url('https://images.pexels.com/photos/450035/pexels-photo-450035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'); background-repeat: no-repeat; background-size: cover; background-position: bottom center; height: 100vh; color: #fff; display: flex; justify-content: center; align-items: center; text-align: center; position: relative; margin-bottom: 20px; z-index: -2; } .hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: -1; } .hero h1 { font-size: 46px; margin: -20px 0 20px; } .hero p { font-size: 20px; letter-spacing: 1px; } .content h2, .content h3 { font-size: 150%; margin: 20px 0; } .content p { color: #555; line-height: 30px; letter-spacing: 1.2px; } |
ここまで実装すると以下のようになります。

個人的に、以下のスタイルで画像にオーバーレイをかけて少し暗くしている処理が気になったので、後で記事にしてみたいと思います。
1 2 3 4 5 6 7 8 9 10 11 |
// 画像にオーバーレイをかける技 hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: -1; } |
また、この時点で、Navbarは上部に固定化されています。

これは、navクラスのスタイルにつけた「position: fixed」で実現しています。
1 2 3 4 |
.nav { position: fixed; ... } |
JavaScriptの実装
JavaScriptでは、navクラスがついているHTML要素に「active」クラスをつけてNavibation Barの色を反転します。
要素を取得する
画面操作に必要な要素を取得します。
1 2 |
// 要素を取得する const nav = document.querySelector('.nav') |
scrollイベントの登録
ページをスクロールした時にactiveクラスをつけたいので、scrollイベントを登録します。
1 2 |
// scrollイベントの登録 window.addEventListener('scroll', fixNav) |
fixNavは、これから作成する関数です。
反転処理の実装
先ほど定義したfixNavに、Navigation Barの反転処理を実装します。
1 2 3 4 5 6 7 8 9 10 11 12 |
// Navigation Barの反転処理 function fixNav() { // scrollYはページのスクロール位置 // offsetHeightは、Navigation Barの位置 if (window.scrollY > nav.offsetHeight + 150) { // activeクラスを付与 nav.classList.add('active') } else { // activeクラスを除去 nav.classList.remove('active') } } |
これで完成です。
おわりに
今回もCSSが難しかったですね。Navbarを簡単に実装したい人は、BootstrapのNavbarも検討に入れるといいと思います。
それでは、また!
JavaScriptまとめ
JavaScript ソースコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// 要素を取得する const nav = document.querySelector('.nav') // scrollイベントの登録 window.addEventListener('scroll', fixNav) // Navigation Barの反転処理 function fixNav() { // scrollYはページのスクロール位置 // offsetHeightは、Navigation Barの位置 if (window.scrollY > nav.offsetHeight + 150) { // activeクラスを付与 nav.classList.add('active') } else { // activeクラスを除去 nav.classList.remove('active') } } |
コメントを残す
コメントを投稿するにはログインしてください。