ここでは、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についてほとんど知らないという方は下記も参考にしてみてください。

2018.08.01

jQuery入門｜説明の前提が分からない方へ

ここでは、jQueryの説明の前提が分からなくてお困りの方に向けて、基本の中の基本のお話をしたいと思います。ただし、ここではスタイルシートを例に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以上スクロールさせたとき）を満たさないときに、クラス名を削除して固定解除をしています。

}

});

});

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