【HTML,CSS,JQuery】スクロール時にヘッダーの背景色を変える

割とよく使うので忘備録として・・。

##スクロール時にヘッダーの背景色を変える

1. タブレット画面幅以下の時のみ
2. ヘッダーが固定
3. ヘッダー透明でトップビジュアルの上にあるが、スクロールしたら透明は見難いから色をつけたい。

<header>
  <p><a href="/"><img src="pathToLogo" alt="ロゴ"></a></p>
  <button><img src="pathToImg" alt="メニューボタンなど"></button>
</header>

$(function(){
   var breakPoint = 768;
   if ($(window).innerWidth() <= breakPoint) {
     var mainVisualHeight = 420;
     var header = $('header');
     $(window).scroll(function () {
       $(this).scrollTop() > mainVisualHeight ?  header.css('background', '#fff'): header.css('background', 'inherit');
      });
     }
});