【プログラミング・Web制作勉強ログ#82】5/27の積み上げ成果

    <header class="header">
        <div class="container">
            <a href="#">
                <div class="header_title">株式会社北村建設興業</div>
            </a>
            <div id="nav-open" class="pc-none">
                <span></span>
            </div>
            <div id="nav-content" class="sp-none">
                <nav class="header-nav">
                    <ul class="nav-list">
                        <li><a href="#about">ABOUT</a></li>
                        <li><a href="#service">SERVICE</a></li>
                        <li><a href="#works">WORKS</a></li>
                        <li><a href="#info">NEWS</a></li>
                        <li><a href="#company">COMPANY</a></li>
                        <li><a href="#contact">CONTACT</a></li>
                    </ul>
                </nav>
            </div>
        </div>
        <div id="hamburger-bg" class="hamburger-bg"></div>
    </header>

/* ------------
header
-------------- */
.header {
    width: 100%;
    height: 80px;
    position: fixed;
    font-weight: light;
    z-index: 999;
    .container {
        display: flex;
        justify-content: space-between;
        white-space: nowrap;
        align-items: center;
        height: 80px;
        .header_title {
            color: $white;
            font-size: 2rem;
            @include mq(md) {
                margin-left: 20px;
            }
            @include mq(sp) {
                position: absolute;
                top: 0;
                padding-top: 13px;
            }
        }
        .header-nav ul {
            display: flex;
            gap: 30px;
            @include mq(md) {
                gap: 10px;
                margin-right: 20px;
            }
            @include mq(sp) {
                flex-direction: column;
                gap: 0;
                margin-right: 0;
            }
            li a {
                color: $white;
                font-size: 1.8rem;
                position: relative;
                display: inline-block;
               
                @include mq(sp) {
                    display: block;
                    padding-left: 20px;
                    line-height: 58px;
                }
                &:hover {
                    opacity: 0.7;
                    &::after {
                        transform: scale(1,1);
                    }
                    @include mq(sp) {
                        opacity: 1;
                        background-color: #000;
                        transition: all 1.5s;
                    }
                }
                &:after {
                    position: absolute;
                    bottom: -4px;
                    left: 0;
                    content: '';
                    width: 100%;
                    height: 1px;
                    background: rgba($color: $white, $alpha: 0.7);
                    transform: scale(0, 1);
                    transform-origin: center;
                    transition: transform .7s;
                    @include mq(sp) {
                        content: none;
                    }
                }
                &.active:after {
                    background: rgba($color: #000, $alpha: 0.7);
                }
            }

        }
        //ハンバーガーメニュー
        @include mq(sp) {
            //ハンバーガーメニューのボタン
            #nav-open {
                    background: $white;
                    width: 72px;
                    height: 50px;
                    position: fixed;
                    right: 0;
                    top: 0;
                    padding: 13px 20px;
                    z-index: 9999;      
            }
            #nav-open span, #nav-open span:before, #nav-open span:after {
                position: absolute;
                transition: all .7s;
                height: 4px;
                width: 35px;
                border-radius: 2px;
                background: $mainColor;
                display: block;
                content: '';
                cursor: pointer;
                z-index: 9999;
            }
            #nav-open span:before {
                bottom: -10px;
            }
            #nav-open span:after {
                bottom: -20px;
            }
            #nav-open.active span {
                -webkit-transform: translateY(12px) rotate(-135deg);
                transform: translateY(12px) rotate(-135deg);
            }
            #nav-open.active span:before {
                -webkit-transform: translateY(-8px) rotate(135deg);
                transform: translateY(-8px) rotate(135deg);
                opacity: 0;
            }
            #nav-open.active span:after {
                -webkit-transform: translateY(-20px) rotate(135deg);
                transform: translateY(-20px) rotate(90deg);
            }
            //ナビゲーションメニュー
            #nav-content {
                display: block;
                position: fixed;
                z-index: 9999;
                top: 50px;
                right: -100%;
                width: 100%;
                height: 348px;
                background: $mainColor;
                transition: all .7s;
            }
            #nav-content.open {
                display: block;
                right: 0;
                width: 300px;
                height: 348px;
            }
            //背景
            .hamburger-bg {
                -webkit-transition: all .7s;
                transition: all .7s;
            }
            .hamburger-bg.active {
                width: 100vw;
                height: 100vh;
                background: $mainColor;
                opacity: .7;
            }
        }
    }
}

//ヘッダーメニュー(ABOUTエリアまでスクロールしたらフォントのカラーを黒にする)//
    //メモ：スクロール幅の定義(#mainとID名で指定すると効かなかった？)

    //処理を効かせるための高さを定義
const sliderHeight = $('.main').height();
　  //ここから処理内容
if (window.matchMedia('(max-width: 768px)').matches) {
    //スマホ処理
    $(document).scroll(function() {
        if (sliderHeight -30 < $(this).scrollTop()) { //メインエリア以降スクロールすると起動
            $('.header_title').css('color', '#000');
        } 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');
        }
    });
};