レスポンシブ時、fvを過ぎたらスティッキーヘッダーが出るようにしていて、fvを過ぎたらヘッダーのロゴ画像とハンバーガーメニューの色が変わって、fvまで戻ってきたら初期のヘッダーのロゴ画像とハンバーガーメニューの色に戻るようにコーディングしていて、fvを過ぎたらきちんと色は変わってくれるのですが、fvまで戻ってきたら、『このページの内容』というタブが出ます。本当に分からなくて困っています。わかる方いらっしゃいませんでしょうか。
多分原因はjqueryにあると思います。
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" id="nav-list"> <li class="nav-items"> <a href="#top"> <p class="nav-items-ja">トップ</p> <p class="nav-items-en">TOP</p> </a> </li> <li class="nav-items"> <a href="#service"> <p class="nav-items-ja">事業内容</p> <p class="nav-items-en">SERVICES</p> </a> </li> <li class="nav-items"> <a href="#about"> <p class="nav-items-ja">園崎組について</p> <p class="nav-items-en">ABOUT</p> </a> </li> <li class="nav-items"> <a href="#works"> <p class="nav-items-ja">園崎組の実績</p> <p class="nav-items-en">WORKS</p> </a> </li> <li class="nav-items"> <a href="#recruit"> <p class="nav-items-ja">採用情報</p> <p class="nav-items-en">RECRUIT</p> </a> </li> <li class="nav-items"> <a href="#contact"> <p class="nav-items-ja">お問い合わせ</p> <p class="nav-items-en">CONTACT</p> </a> </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
header{ width: 100%; color: #FFFFFF; position: absolute; top: 0; z-index: 300; transition: .3s; } .header.fixed { position: fixed; background-color: #ffffff; width: 100%; transition: .3s; z-index: 300; } .header.fixed a{ color: #191919; } .header-inner{ display: flex; align-items: center; } .header-logo{ padding-left: 39px; padding-right: 50px; width: 136px; height: 29px; } .nav-list{ display: flex; align-items: center; padding: 25px 0; } .nav-items a{ color: #ffffff; } .nav-items-ja{ font-size: 1.6rem; position: relative; margin: 0 20px; } .nav-items-en{ text-align: center; font-family: 'Lato', sans-serif; font-weight: 400; font-size: 1.0rem; } .nav-items{ position: relative; display: inline-block; } .nav-items::after { content: ""; background: #FFFFFF; display: inline-block; width: 1px; height: 30px; position: absolute; top:1px; right:-1px; } .nav-items::after{ transform: rotate(35deg); } .nav-items:last-child::after{ content: none; } .burger-btn{ display: none; } .header-logo.headerLogoScroll.-before { display : none; } .header-logo.-after { display : none; } .header-logo.headerLogoScroll.-after { display : block; }
css.sp
.header-logo{ padding: 15px 10px 10px; } .header-logo img{ padding: 0; } .slide-img img{ margin-top: 60px; } .header.fixed{ color: #ffffff; } .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; color: #ffffff; } .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; 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; } .burger-btn.headerLogoScroll .bar{ background-color: #191919; } 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; }
jquery
// スティッキーヘッダー $(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,.burger-btn").addClass("headerLogoScroll"); } else { $(".js-header").removeClass("headerLogoScroll"); if ($(this).scrollTop() == 0) { alert(); $(".burger-btn").removeClass("headerLogoScroll"); } } }); }); // ハンバーガーメニュー $('.burger-btn').on('click',function(){ $('.header-nav').fadeToggle(300); $(this).toggleClass('cross'); $('body').toggleClass('noscroll'); }); // スムーススクロール $(function(){ $('a[href^="#"]').on("click", function() { var speed = 600; var header_height = $("header").height(); var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top - header_height; $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); // ハンバーガーボタンメニュー消す $('#nav-list a[href]').on('click', function(event) { if($(window).width()<=820){ $('.burger-btn').trigger('click'); } });
まだ回答がついていません
会員登録して回答してみよう