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

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

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

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

jQuery

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

解決済

スクロールをしたらハンバーガーメニューの色を変わるようにしたが、スクロールをtopまで戻したら色が戻るようにしたい。

gakki---
gakki---

総合スコア11

JavaScript

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

jQuery

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

1回答

-1評価

1クリップ

217閲覧

投稿2022/04/24 09:14

わかる方がいらっしゃいましたらご教示お願いします。

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-logp{ padding: 15px 10px 10px; } .header-logo img{ padding: 0; } .slide-img img{ object-position: 25%; } .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; } .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"); } }); });

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

JavaScript

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

jQuery

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