【jQuery】スクロール時、変形するヘッダーの作り方

RELEASE / 2022.6.3 UPDATE / 2023.11.18

jQuery

スクロール

ヘッダー

変形

最近のサイトはスクロールすると画面上部に固定表示されて付いてくるヘッダーをよく見ます。
そのままのサイズで画面上部に固定すると分厚くて画面の1/3を占めてしまうということも考えられます。
そんな時、ヘッダーを変形させて高さを減らしたり要素を非表示にしたりして画面内に占めるヘッダーの割合を減らす方法を取ることがあります。

今回はスクロールした時、ヘッダーを変形させる方法をまとめました。

この記事の目次を表示

1 スクロール時、変形するヘッダーの作り方
- 1.1 完成形はこちら
- 1.2 スクロールした時、変形するヘッダーの作り方

スクロール時、変形するヘッダーの作り方

完成形はこちら

まずはスクロールした時、変形するヘッダーの完成形をご覧ください。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

いくつかポイントはありますが、順番に見ていきましょう。

スクロールした時、変形するヘッダーの作り方

HTML

<header class="header">
  <h1>IRODORI DESIGN</h1>
  <nav>
    <ul>
      <li><a href="#">ナビ1</a></li>
      <li><a href="#">ナビ2</a></li>
      <li><a href="#">ナビ3</a></li>
    </ul>
  </nav>
</header>
<div class="main"></div>

CSS

.header{
  width: 100%;
  padding: 25px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #eee;
  position: fixed;
}
.header h1{
  font-size: 16px;
}
nav ul{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  list-style-type: none;
}
nav ul li:not(:last-child){
  margin-right: 25px;
}
nav ul li a{
  font-size: 14px;
  display: block;
}
.main{
  height: 1000px;
}

変形時のCSSを作成

/* 変形時アニメーション */
.header,
.header *{
  transition: .4s all ease;
}
/* 変形用ヘッダーCSS */
.js-header_fixed{
  padding: 15px;
}
.js-header_fixed h1{
  font-size: 12px;
}
.js-header_fixed ul li:not(:last-child){
  margin-right: 10px;
}
.js-header_fixed ul li a{
  font-size: 12px;
}

変形時（スクロール時）はheaderにclass="js-header_fixed"が付与されるようにjQueryを使用して記述していきます。

jQuery

var $header = $(".header");
$(window).on('scroll',function(){
  if( $(window).scrollTop() > 0 ){
    $header.addClass("js-header_fixed");
  }else{
    $header.removeClass("js-header_fixed");
  }
});

$(window).on('scroll',function(){は、スクロールした時、発火させるjQueryの記述です。
この記述でスクロールした時、処理を記述することが出来ます。
$(window).scrollTop()はページ全体のスクロール位置を取得できます。
if( $(window).scrollTop() > 0 ){と書くことで、スクロール位置が0より大きい時、つまり画面を少しでもスクロールした時、という意味になります。

画面を少しでもスクロールした際、$header.addClass("js-header_fixed");、任意のクラスを追加します。
このクラスに変形用のcssを記述しておきます。
逆にスクロール量が0の時は$header.removeClass("js-header_fixed");でクラスを外します。

ここまでの記述で作成されたスクロール時変形するヘッダーはこちらです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

以上でスクロール時、変形するヘッダーの完成です。実際のサイト制作でも使用頻度は高めだと思います。