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

どうも@De_webdesignです。

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

サンプルコード

HTML

CSS

jQuery

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メニューだけでなくサイドバーやいろいろなところでも使用できますので、自分のサイトにあった箇所で使用してください。

では。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。