JavaScriptを使ってスクロールでメニューを固定・追従させる方法

今回は、JavaScriptを使って、スクロールでメニューを固定、追従させる方法を紹介していきます。

プログラミングに慣れていない人でもできるように、1つ1つの手順を丁寧に解説していくので安心してください。

今回は以下の様な実装を目指していきます。

See the Pen BGyGjB by kamaboko (@kamaboko9) on CodePen.

1,HTMLでメニューの構造を作る

まずはHTMLを編集してメニューの構造を作っていきましょう。

<div id="nav" class="nav-outer">
  <div class="nav-inner">
    <div class="nav-item">
      <a href="#">Home</a>
    </div>
    <div class="nav-item">
      <a href="#">Contact</a>
    </div>
    <div class="nav-item">
      <a href="#">About</a>
    </div>
  </div>
</div>

ここでのポイントは、一番外側のdivにはid="nav"を付けることです。これは、後でJavaScriptを使う時に一番外側のdivをJavaScriptで扱いやすくするためです。

メニューの場合はulタグを使うのが一般的ですが、今回は、メニューの中身はdivタグで作っています。

2,CSSをカスタマイズする

次にCSSのカスタマイズをしていきましょう。まずは、通常のメニュー用のCSSを書きます。

.nav-outer {
  width: 100%;
  border: 2px solid #777;
  z-index: 1000;
  background: #fff;
}

.nav-inner {
  width: 800px;
  margin: 0 auto;
  display: flex;
}

.nav-item {
  padding: 10px 20px;
}

次にスクロールした時にメニューを固定させるために必要なCSSを書いていきます。

//先ほどのコードに追記
.fixed {
  position: fixed;
  top: 0;
}

この.fixed以下のコードは、JavaScriptでスクロール量を測定して、メニューを固定したいスクロール量に達した時にdiv="nav"のclassとして追加する予定です。

3, JavaScriptをカスタマイズ

最後にJavaScriptのコードを書いていきましょう。

let nav, scroll;

function initScrollVal() {
  nav    = document.getElementById("nav");
  scroll = nav.offsetTop;
}

function scrollFixed() {
  if( window.pageYOffset > scroll) {
    nav.classList.add('fixed');
  } else {
    nav.classList.remove('fixed');
  }
}

window.addEventListener('scroll', scrollFixed, false);
window.addEventListener('load' initScrollVal, false);

上のコードは何をしているかと言うと、メニューの上側が画面上に触れたときに、div="nav"にfixedと言うclass名を追加して、メニューの上側が画面上に触れていない場合はfixedを外しています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

SNS Shere

Related Post

Railsアプリで使える!CSSで設定したいおススメの色

JavaScriptのソースコードを読む時に知っておきたいモジュールパターン

JavaScriptにおける短絡演算子(ショートカット演算子)の実践的な使い方

Windowsにnode.js+Electronを入れてwindowsアプリを作る方法

JavaScriptの配列で参照渡しではなく値渡しをする方法と注意点

JavaScriptのライブラリ等でよく見る変数宣言パターン