＜nav＞ナビゲーションメニューを途中から固定させる方法

プログラミング
2020.10.03


こんにちは、すずです(^o^)

今回は「ナビゲーションメニューを途中から固定させる方法」について解説します。

早速ご覧ください！

＜nav＞ナビゲーションメニューを途中から固定させる方法

ヒーローイメージの下までスクロールしたら、ナビゲーションメニューをトップで固定させてみましょう。

デモがこちら⇩

※デモサイトを貼る

HTML

コード全体がこちら⇩

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>
  <link rel="stylesheet" href="./CSS/style.css">
  <!-- jQuery CDN -->
  <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
  <script src="./js/script.js"></script>
</head>
<body>
  <section id="hero">
    <div class="hero">
      <img src="./img/chocolate.jpg">
    </div>
  </section>
  <section id="header">
    <nav class="nav">
      <ul>
        <li><a href="#">MENU1</a></li>
        <li><a href="#">MENU2</a></li>
        <li><a href="#">MENU3</a></li>
        <li><a href="#">MENU4</a></li>
        <li><a href="#">MENU5</a></li>
      </ul>
    </nav>
  </section>
  <div class="container"></div>
</body>
</html>

順番に解説していきます。

必要ファイルの読み込み

まずは、今回の実装にCSSとjQueryを使うので、

[box class=”white_box”]

  • .css
  • jQueryのCDN(ローカルファイルでもOK)
  • .js(jQuery)

[/box]

を<head>タグの中に記述します。

ナビゲーションメニューを用意

ヒーローイメージの下に、ナビゲーションメニューを用意します。

<section id="header">
    <nav class="nav">
      <ul>
        <li><a href="#">MENU1</a></li>
        <li><a href="#">MENU2</a></li>
        <li><a href="#">MENU3</a></li>
        <li><a href="#">MENU4</a></li>
        <li><a href="#">MENU5</a></li>
      </ul>
    </nav>
  </section>

スクロールした際に、ちゃんと固定になっているか確かめるため、以下を追記します。

<div class="container"></div>

HTMLはこれでOKです。

CSS

コード全体がこちら⇩

@charset "utf-8";

.hero img {
  width: 100%;
  height: 500px;
}

.nav ul {
  list-style: none;
  display: flex;
  background: #333;
  justify-content: space-around;
  margin: 0 auto;
  padding: 5px 0;
  width: 100%;
}

.nav a {
  display: block;
  color: #fff;
  padding: 12px 24px;
  text-decoration: none;
}

.nav li a:hover {
  background: #72baeb;
}

.fixed {
  position: fixed;
  top: 0;
  padding: 0;
  width: 100%;
  z-index: 1000;
}

.container {
  height: 2000px;
}

.hero imgのCSSは、ヒーローイメージのサイズを調整しているだけなので、お好きなように変更して大丈夫です。

.navに関するCSSも、お好きなように変えちゃってOKです。

position: fixed; で固定させる

position: fixed;で要素を固定することができます。
top: 0;で固定する場所を、画面の一番上に指定しましょう。

そして、確認用の.containerに対して、heightを適当な大きさで付けます。

ちなみに、.fixedは次のjQueryで使いますよ！

jQuery

コード全体がこちら⇩

$(function () {
  const offset = $(".nav").offset();

  $(window).scroll(function () {
    if ($(window).scrollTop() > offset.top) {
      $(".nav").addClass("fixed");
    } else {
      $(".nav").removeClass("fixed");
    }
  });
});

offsetメソッドで値を取得

offset() で、ドキュメントの左上の起点と、指定要素の左上の距離を取得します。
ちなみに取得できる値は、上からの距離と左からの距離のみで、右や下からの距離は取得できません。

scrollイベントを使う

.scroll()で、ユーザがスクロールを行った際にイベントを発生させます。

if ($(window).scrollTop() > offset.top) {
      $(".nav").addClass("fixed");
    }

画面をoffsetメソッドで取得した.navの先頭の位置よりもスクロールしたとき、.navに対して.fixedを追加する。

さきほどCSSで記述した.fixedが適用されます⇩

.fixed {
  position: fixed;
  top: 0;
  padding: 0;
  width: 100%;
  z-index: 1000;
}

上記のif文に該当しない場合は、removeClassで.navから.fixedを削除します。

ちょっと難しいかもしれないですが、メソッドを個別に調べてみると、だんだん理解できるはずです。

まとめ

今回は「ナビゲーションメニューを途中から固定させる方法」をご紹介しました。

このブログでは、プログラミングの技術・実装方法について、なるべく分かりやすく簡潔に解説しています。

今後もいろいろご紹介していきますので、見ていただけたらうれしいです(^o^)

ありがとうございました～

タイトルとURLをコピーしました