JavaScript

スクロールすると途中から上部に固定されるメニューの作り方

ここでは、jQueryを使ってページをスクロールすると途中から上部に固定されるグローバルメニューを作っていきます。

スクロールすると途中から上部に固定されるメニュー

はじめに完成したサンプルをご覧ください。

ボタンで表示を切り替えてご覧ください。

See the Pen scroll_fixed_menu by kenichi (@ken81) on CodePen.

スタイルシート

CSS

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

スタイルシートでは、適当にクラス名を作って固定された状態のときのデザインを指定します。基本は、position:fixed;でメニューを上部に固定させるだけです。z-index:10;はページのコンテンツによっては、スクロールしたときにコンテンツがメニューよりも上にかぶさってしまう場合に、値を高くして調整します。

jQuery

$(function () {
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) { //100px以上スクロールした固定
      $('#menu').addClass('fixed');
    } else {
      $('#menu').removeClass('fixed');
    }
  });
});

こちらがjQueryの内容です。今回は、100px以上スクロールしたときにメニューが固定されるように指定しました。

内容を理解したい方でjQueryについてほとんど知らないという方は下記も参考にしてみてください。

コードの解説

下記のコードの中で説明を見たい行をクリックしてください。説明文が開きます。

$(function () {
$(function(){
  //処理する内容
});

この部分はjQueryで使われるお決まりのコードです。jQueryではたいてい処理したい内容をこのように記載します。

$(window).scroll(function () {
$(window).scroll(function() {
  //処理する内容
});

これはスクロールイベントと言われるものです。ページがスクロールされたときに処理したい内容を中に入れます。

if ($(this).scrollTop() > 100) {
if(条件){ 処理する内容 }

で条件を満たしたときに波括弧{}の中の処理が実行されます。

$(this)はイベントが発生した要素になるので今回の場合は、

$(this) = $(window)

という意味になります。windowは、ブラウザのウインドウを指します

scrollTop()は、スクロール位置を取得するメソッドです。

$(this).scrollTop() > 100

で、「ページを100px以上スクロールしたとき」という意味になります。

$(‘#menu’).addClass(‘fixed’);
addClass()は、クラス名を追加するメソッドです。

$(要素).addClass(クラス名)

という形で指定した要素にクラス名を追加します。
このメソッドを使ってメニューを固定したときのクラス名を追加しています。

} else {
if文のその他の条件を表す部分です。

if(条件){
  // 条件が合う場合
  } else {
  // 条件が合わない場合
}
$(‘#menu’).removeClass(‘fixed’);
removeClass()は、クラス名を削除するメソッドです。

$(要素).removeClass(クラス名)

という形で指定した要素から任意のクラス名を取り除きます。

ここでは、条件(100px以上スクロールさせたとき)を満たさないときに、クラス名を削除して固定解除をしています。

}
});
});

以上がスクロールすると途中から上部に固定されるメニューの作り方でした。

最近の記事

  1. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  2. CSS

    CSS|中央寄せが効かないときは・・・
  3. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  4. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  5. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
PAGE TOP