【プログラミング・Web制作勉強ログ#97】6/16～18の積み上げ成果

//ヘッダーメニュー(ABOUTエリアまでスクロールしたらフォントのカラーを黒にする)//

    //処理を効かせるための高さを定義
    $(function () {
        $(window).on("scroll", function () {
            const sliderHeight = $('#main').height();
            //ここから処理内容
            if (window.matchMedia('(max-width: 768px)').matches) {
                //スマホ処理
                $(document).scroll(function() {
                    if (sliderHeight -30 < $(this).scrollTop()) { //メインエリア以降スクロールすると起動
                        $('.header_title').css('color', '#000');
                        $('.header-nav ul li a').css('color', '#fff');//スクロールしてもメニュー内リンクはデフォルト値で維持
                    } else {
                        $('.header_title').css('color', '#fff'); //スクロールしていないときはデフォルト値設定
                    };
                });
            } else if (window.matchMedia('(min-width:769px)').matches) {
                //PC処理
                $(document).scroll(function() {    
                    if (sliderHeight - 50 < $(this).scrollTop()) { //メインエリア以降スクロールすると起動
                    $('.header').css('background-color', 'rgba(255,255,255,0.5)');　//背景色部分
                    $('.header_title').css('color', '#000');
                    $('.header-nav ul li a').css('color', '#000');
                    $('.header-nav ul li a').addClass('active');
                    } else { //スクロールしていないときは起動しない(デフォルト値設定)
                    $('.header').css('background-color', 'unset');
                    $('.header_title').css('color', '#fff');
                    $('.header-nav ul li a').css('color', '#fff');
                    $('.header-nav ul li a').removeClass('active');
                    }
                });
            };
        });
    });

if (sliderHeight -30 < $(this).scrollTop()) { 
    $('.header_title').css('color', '#000');
    $('.header-nav ul li a').css('color', '#fff');
    $('.header').css('background-color', '');  ←これを追記
}

$('.header').css('background-color', 'rgba(255,255,255,0.5)');
$('.header').css('background-color', 'unset');
↓に変更
$('.header').addClass('bg-white');
$('.header').removeClass('bg-white');style.scss に追加

.bg-white {
    background-color: rgba(255,255,255,0.5);
    @include mq(sp) {
        background-color: unset;
    }
}