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

こんにちは。KOUKIです。

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

<目次>

実装するもの

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

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

環境構築

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

JavaScriptでアプリ開発 ~環境構築~

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

$ tree
.
├── index.html
├── script.js
└── style.css

$ tree

├── index.html

├── script.js

└── style.css

CSS版

CSSでSticky Navigationをスタイリングしよう!

ページ(HTML)の作成

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

<!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>

<!DOCTYPE html>

<head>

<title>Sticky Navigation</title>

</head>

<body>

<h1 class="logo"><a href="/index.html">My Website</a></h1>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

</nav>

<h1>Welcome To My Website</h1>

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, consequuntur?</p>

</div>

<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>

</body>

</html>

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

スタイル(CSS)を装飾

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

@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;
}

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;

}

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

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

// 画像にオーバーレイをかける技
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::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」で実現しています。

.nav {
  position: fixed;
...
}

.nav {

position: fixed;

...

}

JavaScriptの実装

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

要素を取得する

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

// 要素を取得する
const nav = document.querySelector('.nav')

1 2	// 要素を取得する const nav = document.querySelector('.nav')

scrollイベントの登録

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

// scrollイベントの登録
window.addEventListener('scroll', fixNav)

1 2	// scrollイベントの登録 window.addEventListener('scroll', fixNav)

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

反転処理の実装

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

// 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')
  }
}

// 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 ~ 記事まとめ ~

JavaScript ソースコード

// 要素を取得する
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')
  }
}

// 要素を取得する

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')

}

月	火	水	木	金	土	日
				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

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

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素を取得する

scrollイベントの登録

反転処理の実装

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素を取得する

scrollイベントの登録

反転処理の実装

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

CSSでカスタムレンジスライダーをスタイリングしよう!

[プログラミング]時間計測コード一覧

[Go言語/JavaScript]WebSocketsでチャットアプリを実装…

DjangoでGraphQLを学ぼう！〜クエリ操作〜

[React]~Admin画面4:ログイン処理の実装 ~

[golang]fiber API4~Ambassador: Redisの導…

JavaScriptで検索バーの表示・非表示を制御しよう!

[golang]fiber API5~Admin：プロファイル更新~

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル