ヘッダーを途中で変化させる方法

ずっっっっっと出来なくて悩んでいた、ヘッダーのスタイルを途中で変化させる方法が、知ればすぐ出来てアハ体験をしたので忘れないようにメモ。

例えばこんなとき。

フルスクリーンのサイトを作るときはヘッダーのbackground-colorが無い方がなんだかトレンディですよね。

でもこのままposition:fixedで付いて来ちゃうと視認性が落ちるしかっこわるいので、最初はposition:absoluteで付いてこないようにして、スクロールすると途中でfixedに切り替わり、更にbackground-colorを付与するというおしゃれなサイトでよく見る動作。つまり↓

こういう感じ。切り替わった後はbox-shadowもしくはborder-bottomで区切ってあげると更にgoodだと思います。近頃はよりフラットな印象なのでborder派です。

これのやり方に関しては色々迷走した。JSがまだまだ知識浅いのでとにかくコピペでいけるやつを探しまくったけど意外とこれのやり方でてこない。これやる為に何日費やしてしまったんだ。。以下、すぐ試せるので同じ悩みがある方はやってみてください。

1. jQuery本体を読み込んだ後に以下スクリプトを記述する

-------------

<script>

$(function(){

var header = $('#header')

header_offset = header.offset();

header_height = header.height();

$(window).scroll(function () {

if($(window).scrollTop() > header_offset.top + header_height) {

header.addClass('scroll');

}else {

header.removeClass('scroll');

}

});

});

</script>

-------------

はい。細かいのはすっ飛ばして次いきます。

2. CSSに「.scroll」を追記！

.scrollを適用すると、スクロールした後のスタイルを記述できます。:hoverに概念は近いと思います。つまり、

-------------

#header{

　background-color:none;

　position:absolute;

　top:0;

　}

-------------

てのがあったとして、その次に

-------------

#header.scroll{

　background-color:white;

　position:fixed

　top:0;

　border-bottom:solid 1px silver;

　}

-------------

ちょっとテキトーですが上記を記述すると、スクロール前は背景色なしでabsoluteですが、スクロールしたら途中でページ上部に固定されて背景色にwhiteが適用されてborder-bottomにsilverが適用されました！

すっきり