5分でできるjQueryで実装する簡単スティッキーヘッダーの作り方

どうも@De_webdesignです。

2014年あたりから流行りだしたスティッキーヘッダー（sticky header）ですが、jQueryで簡単に実装できるのでぜひこの機会に試してはいかがでしょうか？固定ヘッダーはユーザーに非常に人気であり、このトレンドはまだしばらく続きそうですね。このチュートリアルではこのサイト同様、ユーザーがスクロールするまではメニューを大きく表示し、スクロールしたら小さくするという動きになります。

サンプルコード

HTML

<div id="menu">
	<ul>
		<li><a href="#">menu01</a></li>
		<li>a href="#">menu02</a></li>
		<li>a href="#">menu03</a></li>
	</ul>
</div>

CSS

#menu ul{
	list-style: none;
	background:transparent;

}

#menu ul li{
	display: inline-block;
}

#menu ul li a{
	padding: 30px 15px;
    margin: 15px;
    font-size: 12px;
    text-decoration: none;
    text-transform: uppercase;
    color: #a2a2a2;
    font-weight: 200;
    letter-spacing: 3px;
    transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    -o-transition: 0.5s ease;

}
#menu ul.sticky li a{
	padding: 10px;
}
#menu ul{
	background:rgba(50,50,50,0.7);
}

jQuery

$(window).scroll(function() {
if ($(this).scrollTop() > 1){  
    $('#menu ul').addClass("sticky");
  }
  else{
    $('#menu ul').removeClass("sticky");
  }
});

jQueryのコードも短くてプログラミングができない人でもわかりやすいですね。
ではjQueryの1行目から説明していきます。

$(window).scroll(function() {

これはスクロールのイベントが発生したときにfunctionの中の処理が実行されます。$(window).scrollはスクロール位置を取得する際にも使ったりするのでぜひ覚えておいてください。

if ($(this).scrollTop() > 1){

これは簡単に言うとスクロールの高さが1pxを超えたらifの中の処理を実行するという記述です。

$(‘#menu ul’).addClass(“sticky”);

これはid=”menu”の中のulに対して「sticky」というクラスを付与する記述です。

else{

さきほどのifでスクロールの高さが1pxを超えたらという説明をしましたが、このelseはifの条件に当てはまらないときに{}の中身が実行されます。つまりここではスクロールが1よりも小さい場合です。

$(‘#menu ul’).removeClass(“sticky”);

これは先ほどのaddClassの逆を行うremoveClassを使用し、クラス名「sticky」を「#menu ul」から取り除く処理をするコードです。

以上でコードの説明は終わりですが、簡単に言うとスクロールしたときに一番上＝0だったらクラスを取り除く、1より大きかったらクラスを追加するというコードになります。
あとはCSSのtransitionでスムーズな変化を表現しています。このtransitionも結構使うので自分のサイトで色々試してみてください。

この方法は、headerメニューだけでなくサイドバーやいろいろなところでも使用できますので、自分のサイトにあった箇所で使用してください。

では。