スクロールすると狭くなる固定ヘッダーの作成方法
ヘッダーを上部に固定させる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でアニメーションを付けることです!
これで下にスクロールした時にはヘッダーが縮み、下から一番上へスクロールした時はヘッダーの高さが広くなります。