[jQuery]スクロールで背景色が変わるナビゲーション

実装するもの

よくある感じのスクロールしたらナビゲーションに背景色がつく、というもの。

検索してもそのまま使えそうなものは無く、少し手間取ったので忘備録として残します。

f:id:sotoogre:20200412001405g:plain
スクロールでナビゲーションの背景色が変わる

jQueryはまだまだ勉強中でメソッドも詳しくない、ということもありますが最初に考えたのはfadeIn,fadeOutoメソッド。
ただこれはすぐに、要素ごと消えてしまうだろうと思ったので試しはせず、次に少し調べてanimateメソッドが使えそうだな、とこれを調べてみることにしました。

まずはjQueryのリファレンス。

そもそも数値型の値をとらない属性（backgroundColorなど）には、animate関数は対応していません。

引用： semooh.jp

どうやらbackground-colorなどには使えない模様。なるほど...。
どうにかならないのか、とたどり着いたのはQiitaの記事。 qiita.com この記事によればjQuery Colorというプラグインがあるらしい！
これを使えばcolorが簡単に取得できるようになるとのこと。

記事を参考に、書いたコードが以下。

$(function(){
    $(window).scroll(function() {
      if($(window).scrollTop() > 100 ) {
        $('nav').animate({'backgroundColor':'#FFFFFF'},'slow');
      } 
      else {
        $('nav').animate({'backgroundColor':'#FF0000'},'slow');
      }
    });
});
});

スクロールした時に背景色を変えることに成功。

f:id:sotoogre:20200412001545g:plain
animateを使用

と思いきや。なぜかelseの方が適用されいるし、画面上までスクロールを戻しても背景色が消えてくれない。読み込み直しというか画面をぐっとひっぱったらゆっくりと背景色を変えてくれてはいました。
animateで付与されたスタイルは削除ができない…？
他の方法を考えてみたものの解決に至らず。

結論

ナビゲーションに同じサイズの別の要素を重ね、その要素に背景色を指定。
その要素をfadeIn、fadeOutさせる。

See the Pen [jQuery]スクロールで背景色が変わるナビゲーション by soto-ogre (@soto-ogre) on CodePen.

HTML

<nav>
    省略
</nav>
<div id="nav"></div>

CSS

  nav {
    position: fixed;
    z-index: 2;
    height: 100px;
  }

  #nav {
    z-index: 1;
    width: 100%;
    height: 100px;
    background-color: rgba(0,0,0,0.8);
    position: fixed;
  }

jQuery

$(function() {
    var nav = $('#nav');    
    nav.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            nav.fadeIn();
        } else {
            nav.fadeOut();
        }
    });
    nav.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});

以下のような実装ができました。 終わり。

f:id:sotoogre:20200412001405g:plain