ヘッダーの色を途中で変えるCSS+JQuery

最初は背景画像や、カラーに併せて
白などにしていたヘッダーの文字色を
ある程度まで下にスクロールしたらヘッダーの色や文字色を変更

ロゴなんかは背景画像にすれば対応できます。

 <header class="js-header">

こう書けば　js-headerの後ろに
header-default　といった指定したクラスが付与されます。

では、どうやってスクロールしたら
付与するようにするかといいますとJQueryの出番です。

メインヴィジュアルの下あたりで変えることが多いのではないでしょうか？
変えたいタイミングの段落に.js-mainVisualを

最後の</body>上あたりに下記を追記します。

<script>
    $(function(){
  var imgHeight = $('.js-mainVisual').outerHeight(); 
  var header = $('.js-header'); 

  $(window).on('load scroll', function(){
     if ($(window).scrollTop() < imgHeight) {
       header.removeClass('header-default');
     }else {
       header.addClass('header-default');
     }
  });
});
</script>

html

<header class=”js-header”>

 <header class="js-header">
            <div class="header_logo">
                <a href="/">
                    <img src="img/logo_w.png" alt="【ドスブイサポート】初期費用0円の格安ホームページ制作・運用サービス">
                </a>
            </div>
            <nav>
                <ul>
                    <li>トップ</li>
                </ul>
            </nav>
</header>
 <main>
        <section id="sec01">
            <div class="main_visual js-mainVisual">
背景ここが終わったら切り替わります
        </section>
</main>

CSS

.header-default {
    color: #000;
  }

お仕事のご依頼やお問い合わせはフォームやツイッターにてお気軽にお問い合わせ下さい。

お問い合わせフォーム

» 高橋しゃちょー (@osaka_dos) | Twitter