2023/02/01 (最終更新日: 2024/03/05)

スクロールしたら画面上部に追従メニューを表示する方法（jQuery使用）

JavaScript Web制作

こんにちは、トシキです。
今回は「スクロールしたら画面上部に追従メニューを表示する方法」について解説していきます。

本記事の内容

スクロールしたら画面上部に追従メニューを表示する方法（jQuery使用）

01. HTML
02. CSS
03. jQuery
04. 「aria-hidden」と「aria-label」属性
05. まとめ

スポンサードサーチ

スクロールしたら画面上部に追従メニューを表示する方法（jQuery使用）

上記のような挙動になります。

See the Pen スクロールしたら画面上部にスライド表示されるメニュー by tosshii (@totototosshii) on CodePen.

01. HTML




<header class="ly_header">
  <nav class="bl_headerNav" aria-hidden="false" aria-label="ヘッダーメニュー">
    <ul class="bl_header_list">
      <li><a href="#1">ヘッダーメニュー01</a></li>
      <li><a href="#2">ヘッダーメニュー02</a></li>
      <li><a href="#3">ヘッダーメニュー03</a></li>
      <li><a href="#4">ヘッダーメニュー04</a></li>
    </ul>
  </nav>
  <nav class="ly_fixedNav" aria-hidden="true" aria-label="追従メニュー">
    <ul class="bl_fixedNav_list">
      <li><a href="#5">追従メニュー01</a></li>
      <li><a href="#6">追従メニュー02</a></li>
      <li><a href="#7">追従メニュー03</a></li>
      <li><a href="#8">追従メニュー04</a></li>
    </ul>
  </nav>
</header>

<section class="ly_cont">
  <h2>メインコンテンツ</h2>
</section>

<header>直下には2つの<nav>があり、.bl_headerNavクラスの方が元々表示されているメニューのエリア。
.ly_fixedNavクラスの方が、スクロールしたらスライドインしてくるエリアになります。

02. CSS




/* SCSS
ヘッダー部分 */
.ly_header {
  padding: 30px;
  background-color: #ddd;
}

.ly_fixedNav {
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  padding: 30px;
  background-color: #b6e1b5;
  transition: top .8s, visibility .8s;
  visibility: hidden;
}

.bl_header_list,
.bl_fixedNav_list {
  display: grid;
  column-gap: 1em;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  max-inline-size: max-content;
  margin-inline: auto;
  li {
    display: grid;
    place-items: center;
  }
  a {
    line-height: 1.5;
    padding: 1em;
  }
}
/* ヘッダー部分ここまで */

/* メインコンテンツ */
.ly_cont {
  height: 2000px;
  background-color: lightblue;
  text-align: center;
  padding: 30px 0;
}

.ly_fixedNavについて

初期状態は非表示にしたいので、top: -100%;で画面外上部へ。
スクロールしたら上からスライドインでアニメーションさせたいので、transitionを指定。
初期状態は画面外にいるので、Tabキーを押してもフォーカスが当たらないように、visibility: hidden;を指定。

フォーカスが有効な場合はTabキーを押すと、以下のようにリンクを囲った状態になります。

03. jQuery




// 追従メニューの関数
const FixedNav = () => {
  const scroll = $(window).scrollTop();
  const header = $('.bl_headerNav');
  const fixed = $('.ly_fixedNav');
  const isHeaderVisible = header.height() >= scroll - 60;
  header.css('visibility', isHeaderVisible ? 'visible' : 'hidden').attr('aria-hidden', !isHeaderVisible);
  fixed.css({'top': isHeaderVisible ? '-100%' : '0', 'visibility': isHeaderVisible ? 'hidden' : 'visible'}).attr('aria-hidden', isHeaderVisible);
}

// 画面をスクロールをしたら発火
$(window).on('scroll', () => {
  FixedNav();
});

スクロールしていき.bl_headerNavの高さを過ぎたら、.bl_headerNavと.ly_fixedNavそれぞれのcssと、area-hiddenの値を変更する内容になっています。
.css()メソッドではvisibilityとtopの値を変更。
.attr()メソッドではaria-hidden属性を取得して、属性値を変更しています。



const isHeaderVisible = header.height() >= scroll - 60;

header.height()で.bl_headerNavの要素の高さを取得し、scroll - 60は現在のスクロール位置から60px引いた値になります。
スクロール位置が60px未満の場合はtrue、それ以上ならfalseがisHeaderVisibleに代入されます。
-60はスライドインのタイミングが思ったより遅い、もしくは早かったりしたら適宜調整してください。



header.css('visibility', isHeaderVisible ? 'visible' : 'hidden').attr('aria-hidden', !isHeaderVisible);

!isHeaderVisibleの!は否定演算子で、isHeaderVisibleがtrueならばfalse、逆にfalseならばtrueが!isHeaderVisibleに入ります。
isHeaderVisible ?〜の部分は三項演算子で条件分岐しています。