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

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

新規登録して質問してみよう
ただいま回答率
87.20%
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オブジェクト」のメソッドとして定義されています。

解決済

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

gaki-log
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オブジェクト」のメソッドとして定義されています。

1回答

0評価

0クリップ

120閲覧

投稿2022/05/08 07:41

レスポンシブ時、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'); } });

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

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オブジェクト」のメソッドとして定義されています。