スクロールさせた際にナビゲーションバーの背景色を変更させる方法について

先輩の会社のホームページを制作中です

• 使用言語

  • HTML5, CSS3, jQuery3.3.1, BootStrap4

• テキストエディタ

  • Visual Studio Code

　今回は、スクロールさせた際にナビゲーションバーの背景色を変化させたいと思い、色々調べてみたところ、以下のjQueryのコードを使うとスクロールさせた際にナビゲーションの背景色が#6c757dに変わることが出来ました。

$(function(){
    $(window).scroll(function() {
        if ($(this).scrollTop() > 0) {
            $('nav').css('background-color', '#6c757d'); /* htmlファイルのnavタグの背景色変更 */
        } else {
            $('nav').css('background', 'none'); /* htmlファイルのnavタグの背景色変更 */
        }
    });
});

また、スクロールさせた位置からトップの位置まで戻したら背景色が元に戻ります。

一体、どういう動きをしているのか

調べてみました

$(window).scrollとは？

windowオブジェクトのscrollメソッドはスクロール位置を指定座標（モニタ上の絶対位置）へ移動します。

モニタ上の絶対位置とは、モニタの左上を基準にして水平方向・垂直方向の距離を指定した位置のことです。
（window.scrollの説明は、 http://www.htmq.com/js/window_scroll.shtml より引用）

つまり、スクロールさせた際の処理については、「２行目以降の{}ブロック内のコードを実行する」という解釈が出来ます。

if文の中身

if ($(this).scrollTop() > 0) {
    $('nav').css('background-color', '#6c757d');
} else {
    $('nav').css('background', 'none');
}

条件式にscrollTop()というのが出てきました。

これは、ブラウザの画面をスクロールした時の位置（スクロール量）を取得できるメソッドになります。

画面横のスクロールバーと捉えても良いようです。

また、取得だけでなく、任意の数値を設定することで、指定された位置にスクロールを移動させることもできるみたいです。

一般的に画面のスクロール位置を取得したい場合には、対象要素は「window」になりますが、今回$(this)というjQueryオブジェクトとセットで使い、scrollTop()の引数を省略することで、対象となる要素のスクロール位置を取得していると考えます。
(scrollTop()メソッドの説明は、 https://www.sejuku.net/blog/61689#scrollTopより引用)

つまり、上記のコード(qiita1.rb)は、トップ位置から少しでもスクロールされた場合に背景色が#6c757dへ変わり、トップ位置の場合は透明色にするという意味になります。

試しに、条件式を下記コード(qiita2.rb)に変えた場合、

if ($(this).scrollTop() > 100)

垂直方向へのスクロール位置がトップ位置から100より大きいになってから、ナビゲーションバーの背景色が変わりました。

また、スクロール位置がトップ位置より100以内になると透明色に戻りました。

ただ、今のままだとスクロールさせると直ぐに色が変わるため、アニメーションによって格好よく切り替わる方法を勉強していきます。