日常のあれこれ。

フリーのフロントエンジニア。サーバーサイドも現在勉強中...webデザイン・フロントエンド・イラスト作成・LP用漫画作成を主なシゴトとしています^^日々学んだことをアウトプットしていきます。

スクロールすると狭くなる固定ヘッダーの作成方法

f:id:creat4869:20190819021942p:plain

ヘッダーを上部に固定させるCSSは簡単でよくするのですが、
時々見る『スクロールしたら高さの幅が自動的に狭くなる固定ヘッダー』を作りたくて、
実際にしてみました。

思っているよりも簡単にできました^^
手順を説明していきます。

HTML

<header id="top-header">
<!--headerに入れたいコンテンツ-->
</header>

jQuery

$(function(){
  var $header = $("top-header");
  $(window).scroll(function(){
    if($(window).scrollTop()>50){
      $header.addClass('fixed');
    }else{
      $header.removeClass('fixed');
    }
  });
});


ここでスクロールしたらfixedというclass名が付与され、一番までスクロールで戻したらfixedというclass名が削除されるようにしています。

CSS

#top-header{
  position: fixed;
  width: 100%;
  height: 60px;
  transition: all 0.3s ease;
}

#top-header.fixed{
  height: 40px;
}


もともとのヘッダーの高さを60pxに指定し、スクロール後は40pxの高さになるようにしています。

高さの指定だけだとスクロールをした時に、すぐに60pxから40pxに変わってしまい見栄えがよくありませんので少しアニメーションを加えました。
それがtransitionという記述です。
これでスクロールした時に、ゆっくりヘッダーが伸び縮みするようになります。

必要なのは、もとの高さと縮んだ後の高さを記述してあげること。
そしてtransitionでアニメーションを付けることです!

これで下にスクロールした時にはヘッダーが縮み、下から一番上へスクロールした時はヘッダーの高さが広くなります。