質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

253閲覧

レスポンシブ時、スライドすると『このページの内容』というタブが出る。なぜでしょうか。

gaki-log

総合スコア23

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2022/05/08 07:41

レスポンシブ時、fvを過ぎたらスティッキーヘッダーが出るようにしていて、fvを過ぎたらヘッダーのロゴ画像とハンバーガーメニューの色が変わって、fvまで戻ってきたら初期のヘッダーのロゴ画像とハンバーガーメニューの色に戻るようにコーディングしていて、fvを過ぎたらきちんと色は変わってくれるのですが、fvまで戻ってきたら、『このページの内容』というタブが出ます。本当に分からなくて困っています。わかる方いらっしゃいませんでしょうか。

多分原因はjqueryにあると思います。

html

1<header class="header"> 2 <div class="header-inner"> 3 <div class="header-logo js-header"> 4 <a href="index.html"><img src="img/logo-w.svg" alt="" 5 class="header-logo js-header -before"/></a> 6 <a href="index.html"><img src="img/logo-b.svg" 7 alt="" class="header-logo js-header -after"/></a> 8 </div> 9 <nav class="header-nav"> 10 <ul class="nav-list" id="nav-list"> 11 <li class="nav-items"> 12 <a href="#top"> 13 <p class="nav-items-ja">トップ</p> 14 <p class="nav-items-en">TOP</p> 15 </a> 16 </li> 17 <li class="nav-items"> 18 <a href="#service"> 19 <p class="nav-items-ja">事業内容</p> 20 <p class="nav-items-en">SERVICES</p> 21 </a> 22 </li> 23 <li class="nav-items"> 24 <a href="#about"> 25 <p class="nav-items-ja">園崎組について</p> 26 <p class="nav-items-en">ABOUT</p> 27 </a> 28 </li> 29 <li class="nav-items"> 30 <a href="#works"> 31 <p class="nav-items-ja">園崎組の実績</p> 32 <p class="nav-items-en">WORKS</p> 33 </a> 34 </li> 35 <li class="nav-items"> 36 <a href="#recruit"> 37 <p class="nav-items-ja">採用情報</p> 38 <p class="nav-items-en">RECRUIT</p> 39 </a> 40 </li> 41 <li class="nav-items"> 42 <a href="#contact"> 43 <p class="nav-items-ja">お問い合わせ</p> 44 <p class="nav-items-en">CONTACT</p> 45 </a> 46 </li> 47 </ul> 48 </nav> 49 </div> 50 <button class="burger-btn"> 51 <span class="bar bar-top"></span> 52 <span class="bar bar-mid"></span> 53 <span class="bar bar-bottom"></span> 54 </button> 55 </header>

css

1header{ 2 width: 100%; 3 color: #FFFFFF; 4 position: absolute; 5 top: 0; 6 z-index: 300; 7 transition: .3s; 8} 9.header.fixed { 10 position: fixed; 11 background-color: #ffffff; 12 width: 100%; 13 transition: .3s; 14 z-index: 300; 15} 16.header.fixed a{ 17 color: #191919; 18} 19.header-inner{ 20 display: flex; 21 align-items: center; 22} 23.header-logo{ 24 padding-left: 39px; 25 padding-right: 50px; 26 width: 136px; 27 height: 29px; 28} 29.nav-list{ 30 display: flex; 31 align-items: center; 32 padding: 25px 0; 33} 34.nav-items a{ 35 color: #ffffff; 36} 37.nav-items-ja{ 38 font-size: 1.6rem; 39 position: relative; 40 margin: 0 20px; 41} 42.nav-items-en{ 43 text-align: center; 44 font-family: 'Lato', sans-serif; 45 font-weight: 400; 46 font-size: 1.0rem; 47} 48.nav-items{ 49 position: relative; 50 display: inline-block; 51} 52.nav-items::after { 53 content: ""; 54 background: #FFFFFF; 55 display: inline-block; 56 width: 1px; 57 height: 30px; 58 position: absolute; 59 top:1px; 60 right:-1px; 61 } 62 .nav-items::after{ 63 transform: rotate(35deg); 64 } 65 .nav-items:last-child::after{ 66 content: none; 67 } 68 .burger-btn{ 69 display: none; 70 } 71 72.header-logo.headerLogoScroll.-before { 73 display : none; 74} 75.header-logo.-after { 76 display : none; 77} 78.header-logo.headerLogoScroll.-after { 79 display : block; 80}

css.sp

1.header-logo{ 2 padding: 15px 10px 10px; 3} 4.header-logo img{ 5 padding: 0; 6} 7.slide-img img{ 8 margin-top: 60px; 9 10} 11.header.fixed{ 12 color: #ffffff; 13} 14.header-nav{ 15 display: none; 16 position: fixed; 17 top: 0; 18 left: 0; 19 width: 100%; 20 height: 100vh; 21 background: #4462a7; 22} 23.nav-list { 24 height: 100%; 25 flex-direction: column; 26 justify-content: center; 27 align-items: center; 28 padding: 0; 29 z-index: 9999; 30 color: #ffffff; 31} 32.nav-items { 33 margin: 0 0 50px; 34} 35.burger-btn { 36 display: block; 37 position: absolute; 38 top: 15px; 39 right: 4vw; 40 z-index: 9999; 41} 42.burger-btn .bar { 43 display: block; 44 height: 3px; 45 width: 30px; 46 background-color: #FFFFFF; 47 transition: .3s; 48} 49.bar-top, 50.bar-mid { 51 margin-bottom: 8px; 52} 53.burger-btn.cross .bar-top{ 54 transform: rotate(45deg) translate(8px,8px); 55 transition: .3s; 56} 57.burger-btn.cross .bar-mid{ 58 opacity: 0; 59 transition: .3s; 60} 61.burger-btn.cross .bar-bottom{ 62 transform: rotate(-45deg) translate(8px,-8px); 63 transition: .3s; 64} 65.burger-btn.headerLogoScroll .bar{ 66 background-color: #191919; 67} 68body.noscroll { 69 overflow: hidden; 70} 71button { 72 background-color: transparent; 73 border: none; 74 cursor: pointer; 75 outline: none; 76 padding: 0; 77 appearance: none; 78} 79.button{ 80 height: 50px; 81 width: 120px; 82 margin-right: 15%; 83} 84.nav-items::after{ 85 display: none; 86}

jquery

1// スティッキーヘッダー 2$(function(){ 3 var $win = $(window), 4 $fv = $('.fv'), 5 $header = $('.header'), 6 fvHeight = $fv.outerHeight(); 7 fixedClass = 'fixed'; 8 9 $win.on('load scroll',function(){ 10 var value = $(this).scrollTop(); 11 if($win.width() > 80){ 12 if( value > fvHeight){ 13 $header.addClass(fixedClass); 14 }else{ 15 $header.removeClass(fixedClass); 16 } 17 } 18 }); 19 }); 20 21 // スクロールするとロゴ画像と色変更 22 23$(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"); } } }); }); 24 25 26// ハンバーガーメニュー 27$('.burger-btn').on('click',function(){ 28 $('.header-nav').fadeToggle(300); 29 $(this).toggleClass('cross'); 30 $('body').toggleClass('noscroll'); 31}); 32 33// スムーススクロール 34$(function(){ 35 $('a[href^="#"]').on("click", function() { 36 var speed = 600; 37 var header_height = $("header").height(); 38 var href= $(this).attr("href"); 39 var target = $(href == "#" || href == "" ? 'html' : href); 40 var position = target.offset().top - header_height; 41 $('body,html').animate({scrollTop:position}, speed, 'swing'); 42 return false; 43 }); 44}); 45 46// ハンバーガーボタンメニュー消す 47$('#nav-list a[href]').on('click', function(event) { 48if($(window).width()<=820){ 49$('.burger-btn').trigger('click'); 50} 51});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

alert()を消せばいけました。

投稿2022/05/08 08:22

gaki-log

総合スコア23

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問