JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

テーブル

グラフ

背景

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

openBD

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.scrollTopでスクロール量を取得して背景色が変わるレスポンシブのヘッダー

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.scrollTop

JavaScriptの.scrollTopでスクロール量を取得して背景色が変わるレスポンシブのヘッダー

JavaScriptの.scrollTopでスクロール量を取得して背景色が変わるレスポンシブのヘッダー

ヘッダーは、ページの上部に配置して表示される部分で、サイトのロゴやメニューをここに置きます。

このヘッダーにはいろんなデザインやレイアウトがありますが、この記事ではよく見る一般的なレイアウトにJavaScriptの .scrollTop を使って背景色が変わるものを作ってみました。

かかかず
かかかず

レスポンシブでスマホにも対応しています。

この記事内のコードを使ったサンプルも上部にあるので、併せてご覧いただきながら参考にし参考にしていただけたら嬉しいです。

.scrollTop

JavaScriptの .scrollTop は、要素の内容が垂直にスクロールするピクセル数を取得または設定するプロパティです。

document.body.scrollTop > 80

この記事では、body タグ内でのピクセル数を .scrollTop で取得して、if の条件分岐でclassの付け替えを行い、ヘッダーの背景色の変化を行います。

スクロールで背景色が加わるヘッダーのサンプル

早速サンプルです。はじめは背景色がない透明のヘッダーが、スクロールするとヘッダーの背景色に白い色が付きます。

かかかず
かかかず

PCだとこんな感じで、スマホだと右側にメニューバーが表示されます。

実装の手順と方法

手順と方法

コードの解説の前に、実装の手順と方法について解説します。

HTMLを記述

はじめに、以下のHTMLを記述します。ヘッダーなので、場所は header タグの中に記述しましょう。

<div id="header">
<div class="headerInner">
<p class="headerLogo">LOGO</p>
<nav>
<ul class="navLinks">
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
</ul>
  <div class="burger">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
  </div>
</nav>
</div>
</div>
JavaScriptの記述

次に、JavaScriptのコードをページに記述します。

コードは <body>〜</body> で、</body> の閉じタグ(クロージングタグ)の前に記述しましょう。

// ヘッダーのスクロール制御
const header = document.getElementById("header");
window.addEventListener('scroll', function(){
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    header.classList.add('resize');
  } else {
    header.classList.remove('resize');
  }
});

//スマホでメニュー表示・非表示
const navMenu = document.querySelector('.navLinks');
document.querySelector(".burger").addEventListener('click', () => {
navMenu.classList.toggle('active');
},);
CSSの記述

最後に、CSSを記述します。

#header {
    position: fixed;
    top: 0;
    width: 100%;
    transition: 0.3s ease-in-out;
    left: 0;
    z-index: 99;
    display: flex;
    margin: 0;
}
.headerInner {
    width: 100%;
    max-width: 1130px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    transition: 0.3s ease-in-out;
    position: relative;
}
.headerInner .headerLogo {
    margin: 0;
    line-height: 60px;
    font-size: 1.8rem;
    font-weight: 500;
}
.headerInner nav .navLinks {
    border: none;
    list-style: none;
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    margin: 0;
    padding: 0;
}
.headerInner nav .navLinks li {
    padding: 0;
    display: inline-block;
}
.headerInner nav .navLinks li a {
    display: block;
    height: 60px;
    line-height: 60px;
    padding: 0 5px;
    position: relative;
    color: #313131;
}
.headerInner nav .navLinks li a:hover {
    text-decoration: none;
}
.headerInner nav .navLinks li a:after {
    content: "";
    bottom: 0;
    width: 0%;
    height: 3px;
    background: #f0db40;
    position: absolute;
    left: 0;
    transition: all 0.4s;
}
.headerInner nav .navLinks li a:hover:after {
    width: 100%;
}
div#header.resize {
    background: #FFF;
    box-shadow: 0 3px 6px rgb(0 0 0 / 18%);
}
div#header.resize .headerInner {
    max-width: 1200px;
}

.burger {
  cursor: pointer;
  display: none;
}

.burger div {
  width: 28px;
  height: 3px;
  background: #dbdbdb;
}

.active {
  display: none;
}

/* スマホUI */
@media screen and (max-width: 767px) {
.headerInner {
    justify-content: center;
}
.headerInner .headerLogo {
    font-size: 1.6rem;
}
.burger {
    display: flex;
    flex-direction: column;
    gap: 7px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
 .headerInner nav .navLinks {
    display: none;
  }
ul.navLinks.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 99%;
    text-align: center;
    background: rgb(0,0,0,.9);
    width: 100%;
    left: 0;
    z-index: 0;
    gap: 0;
}
.headerInner nav .navLinks li a {
    color: #ccc;
}
.headerInner nav .navLinks li a:after {
    content: none;
}
}
かかかず
かかかず

これで完了です。

ざっくりとしたコードの解説

コードはHTML・JavaScript・CSSの3種です。ざっくりですが、順に解説していきます。

HTML

HTMLは、「header」のid名がつく要素の中にインナーの子要素を作り、その中にロゴやメニューを作っていきます。

<div id="header">
<div class="headerInner">
<p class="headerLogo">LOGO</p>
<nav>
<ul class="navLinks">
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
</ul>
  <div class="burger">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
  </div>
</nav>
</div>
</div>

「navLinks」のclass名がつく ul タグがメニューにあたり、ここはCSSのメディアクエリで表示が一番変わる場所です。

JavaScript

JavaScriptは「ヘッダーのスクロールでclassの付け替え」と「スマホでのメニュークリック時のclassトグル」の2種類です。

// ヘッダーのスクロール制御
const header = document.getElementById("header");
window.addEventListener('scroll', function(){
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    header.classList.add('resize');
  } else {
    header.classList.remove('resize');
  }
});

//スマホでメニュー表示・非表示
const navMenu = document.querySelector('.navLinks');
document.querySelector(".burger").addEventListener('click', () => {
navMenu.classList.toggle('active');
},);

冒頭の「ヘッダーのスクロール制御」では、.addEventListener のスクロールイベントで if の条件分岐を記述して、スクロール量が 80 を境に「resize」のclass名の追加・削除して背景色を変更します。

CSS

CSSは、JavaScriptでclass名を追加・削除する為、コード量は少し多めです。

#header {
    position: fixed;
    top: 0;
    width: 100%;
    transition: 0.3s ease-in-out;
    left: 0;
    z-index: 99;
    display: flex;
    margin: 0;
}
.headerInner {
    width: 100%;
    max-width: 1130px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    transition: 0.3s ease-in-out;
    position: relative;
}
.headerInner .headerLogo {
    margin: 0;
    line-height: 60px;
    font-size: 1.8rem;
    font-weight: 500;
}
.headerInner nav .navLinks {
    border: none;
    list-style: none;
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    margin: 0;
    padding: 0;
}
.headerInner nav .navLinks li {
    padding: 0;
    display: inline-block;
}
.headerInner nav .navLinks li a {
    display: block;
    height: 60px;
    line-height: 60px;
    padding: 0 5px;
    position: relative;
    color: #313131;
}
.headerInner nav .navLinks li a:hover {
    text-decoration: none;
}
.headerInner nav .navLinks li a:after {
    content: "";
    bottom: 0;
    width: 0%;
    height: 3px;
    background: #f0db40;
    position: absolute;
    left: 0;
    transition: all 0.4s;
}
.headerInner nav .navLinks li a:hover:after {
    width: 100%;
}
div#header.resize {
    background: #FFF;
    box-shadow: 0 3px 6px rgb(0 0 0 / 18%);
}
div#header.resize .headerInner {
    max-width: 1200px;
}

.burger {
  cursor: pointer;
  display: none;
}

.burger div {
  width: 28px;
  height: 3px;
  background: #dbdbdb;
}

.active {
  display: none;
}

/* スマホUI */
@media screen and (max-width: 767px) {
.headerInner {
    justify-content: center;
}
.headerInner .headerLogo {
    font-size: 1.6rem;
}
.burger {
    display: flex;
    flex-direction: column;
    gap: 7px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
 .headerInner nav .navLinks {
    display: none;
  }
ul.navLinks.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 99%;
    text-align: center;
    background: rgb(0,0,0,.9);
    width: 100%;
    left: 0;
    z-index: 0;
    gap: 0;
}
.headerInner nav .navLinks li a {
    color: #ccc;
}
.headerInner nav .navLinks li a:after {
    content: none;
}
}

「burger」のclass名がつく要素が、スマホで右上に表示されるメニューバーで、ここはJavaScriptじゃなくCSSで表示・非表示をコントロールします。

パソコンで見た場合にこの要素は display: none; で非表示にして、スマホで見ると display: flex; になるようメディアクエリで表示されるようにしています。

さいごに

先生

JavaScriptの .scrollTop は、この記事のように「どれだけスクロールしたか?」などの条件分岐と併せて使うことで、表示を切り替えたりすることができるので是非覚えておきましょう。

UI

  • 他のウィンドウが開くことができないポップアップのUIです。

    モーダル

    モーダル

  • 並列な関係を持つ情報を1つずつ格納するUIです。

    タブ

    タブ

  • サイドから全体を覆うほど大きいメニュー表示するUIです。

    ドロワー

    ドロワー

  • 画像などのコンテンツをスライド表示させるUIです。

    スライダー

    スライダー

  • スクロールで表示が変化するスニペットです。

    スクロール

    スクロール

  • クリックすると隠れていた部分が開閉するUIです。

    アコーディオン

    アコーディオン

  • ページのhタグを取得して目次を生成するスニペットです。

    目次

    目次

  • ページの読み込み時にアニメーションをするスニペットです。

    ローディングアニメーション

    ローディングアニメーション

  • マウスオーバーした際に表示される補足説明です。

    ツールチップ

    ツールチップ

  • ページ内上部にあるナビゲーションUIです。

    ヘッダー

    ヘッダー

  • 行と列の組み合わせでできているUIです。

    テーブル

    テーブル

  • データを表やグラフで可視化して見せるUIです。

    グラフ

    グラフ

  • 背景をアニメーションで動かすスニペットです。

    背景

    背景

フォーム

  • ラジオボタン、チェックボックス、ドロップダウンリストなどを通じて、ユーザーが入力できるUIです。

    フォーム

    フォーム

文字

  • 文字列をJavaScriptで装飾・動きをつけるスニペットです。

    文字の装飾

    文字の装飾

  • 文字列の操作をして、置換・変更を行うスニペットです。

    文字の操作

    文字の操作

  • 文字列をカウントして表示などを行うスニペットです。

    文字のカウント

    文字のカウント

  • 数字の要素を取得して、変更するスニペットです。

    数字の操作

    数字の操作

ウィンドウ

classの操作

  • 要素を取得して、classを追加・削除するスニペットです。

    classの操作

    classの操作

要素の操作

API

  • WordPressのAPIを取得して表示するスニペットです。

    WP REST API

    WP REST API

  • Google Books APIsで書籍の情報を表示するスニペットです。

    Google Books APIs

    Google Books APIs

  • 楽天市場のAPIを取得して表示するスニペットです。

    楽天市場API

    楽天市場API

  • openBDのAPIを取得して表示するスニペットです。

    openBD

    openBD

画像・動画

  • 画像を取得して、アニメーションなどの変化を加えるスニペットです。

    画像の操作

    画像の操作

  • YouTubeの動画を表示するスニペットです。

    YouTube

    YouTube

リンク

  • ページ内のリンクを取得して変更・操作するスニペットです。

    リンク

    リンク

  • Google Analyticsとの連携をするスニペットです。

    Google Analytics

    Google Analytics

cookie

  • ブラウザのcookieを利用するスニペットです。

    cookie

    cookie

検索

  • 指定した要素の中から検索を行うスニペットです。

    検索

    検索