今現在、スライドするとスティッキーヘッダーが出てきて、ロゴ画像が変わる状態なんですけど、ハンバーガーメニューだけが、色の変え方が分からなくて困っています。わかる方がいらっしゃいましたら、ご教示お願いします。
HTML
<header class="header"> <div class="header-inner"> <div class="header-logo js-header"> <a href="index.html"><img src="img/logo-w.svg" alt="" class="header-logo js-header -before"/></a> <a href="index.html"><img src="img/logo-b.svg" alt="" class="header-logo js-header -after"/></a> </div> <nav class="header-nav"> <ul class="nav-list"> <li class="nav-items"> <p class="nav-items-ja">トップ</p> <p class="nav-items-en">TOP</p> </li> <li class="nav-items"> <p class="nav-items-ja">事業内容</p> <p class="nav-items-en">SERVICES</p> </li> <li class="nav-items"> <p class="nav-items-ja">園崎組について</p> <p class="nav-items-en">ABOUT</p> </li> <li class="nav-items"> <p class="nav-items-ja">園崎組の実績</p> <p class="nav-items-en">WORKS</p> </li> <li class="nav-items"> <p class="nav-items-ja">採用情報</p> <p class="nav-items-en">RECRUIT</p> </li> <li class="nav-items"> <p class="nav-items-ja">お問い合わせ</p> <p class="nav-items-en">CONTACT</p> </li> </ul> </nav> </div> <button class="burger-btn"> <span class="bar bar-top"></span> <span class="bar bar-mid"></span> <span class="bar bar-bottom"></span> </button> </header>
css
@media screen and (max-width: 820px){ .header-logo{ padding: 15px 10px 10px; } .header-logo img{ padding: 0; } .slide-img img{ object-position: 25%; } .header-nav{ display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #4462a7; } .nav-list { height: 100%; flex-direction: column; justify-content: center; align-items: center; padding: 0; z-index: 9999; } .nav-items { margin: 0 0 50px; } .burger-btn { display: block; position: absolute; top: 15px; right: 4vw; z-index: 9999; } .burger-btn .bar { display: block; height: 3px; width: 30px; background-color: #FFFFFF; /* background-color: #191919; */ transition: .3s; } .bar-top, .bar-mid { margin-bottom: 8px; } .burger-btn.cross .bar-top{ transform: rotate(45deg) translate(8px,8px); transition: .3s; } .burger-btn.cross .bar-mid{ opacity: 0; transition: .3s; } .burger-btn.cross .bar-bottom{ transform: rotate(-45deg) translate(8px,-8px); transition: .3s; } body.noscroll { overflow: hidden; } button { background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; } .button{ height: 50px; width: 120px; margin-right: 15%; } .nav-items::after{ display: none; } }
query
// スティッキーヘッダー $(function(){ var $win = $(window), $fv = $('.fv'), $header = $('.header'), fvHeight = $fv.outerHeight(); fixedClass = 'fixed'; $win.on('load scroll',function(){ var value = $(this).scrollTop(); if($win.width() > 80){ if( value > fvHeight){ $header.addClass(fixedClass); }else{ $header.removeClass(fixedClass); } } }); }); // スクロールするとロゴ画像変更 $(function () { $(window).on("scroll", function () { const sliderHeight = $(".header").height(); if (sliderHeight - 30 < $(this).scrollTop()) { $(".js-header").addClass("headerLogoScroll"); } else { $(".js-header").removeClass("headerLogoScroll"); } }); });
まだ回答がついていません
会員登録して回答してみよう