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

Question

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

 <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>

.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;
}

// スティッキーヘッダー
$(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");
    }
  });
});

Answer 1

スクロールのイベントリスナ内で$(this).scrollTop()が0の時にheaderLogoScrollクラスをつければいいように思います。

Comments

[gakki---]

自分的に考えて見たのですが、分からなくて申し訳ないです。

$(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");
}
});
});
このコード内にどのように付ければ良いのでしょうか。

[gakki---]

$(function () {
$(window).on("scroll", function () {
$(this).scrollTop() > 100 {
addClass('headerLogoScroll');
}
const sliderHeight = $(".header").height();
if (sliderHeight - 30 < $(this).scrollTop()) {
$(".js-header,.burger-btn").addClass("headerLogoScroll");
} else {
$(".js-header").removeClass("headerLogoScroll");
}
});
});

ここまでいけたのですが、何を間違えてますでしょうか？

[Lhankor_Mhy]

すいません、逆でしたね。.burger-btn の headerLogoScroll クラスを外すのが正解だと思います。

[gakki---]

試して見たのですが、うまくいかないです。
具体的なコード教えていただけないでしょうか。

[Lhankor_Mhy]

一揆に正しいコードを書こうとせずに、ひとつづつ潰していくのがいいと思いますよ。

「スクロールをtopまで戻したら色が戻るようにしたい。」は

・スクロールをtopまで戻したら
・色が戻る

の二つに分解して、まずひとつ目からチャレンジしてみてはどうですか？

if ($(this).scrollTop() == 0) {
alert();
}

[Lhankor_Mhy]

ひとつ目ができたら、ふたつ目に挑戦してみてください。
「.burger-btn の headerLogoScroll クラスを外す」をjQueryで書くには、
・.burger-btn の要素を指定してjQueryオブジェクトを作る
・jQueryオブジェクトのremoveClassメソッドを呼び出す
・引数にクラス名を渡す（headerLogoScroll）
ということを記述します。

[gakki---]

分かりやすく詳しく本当にありがとうございます。

$(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");
}
}
});
});

このコードになったのですが、topまで戻ると『このページの内容』というタブが出てきてOKを押すと色が戻っています。このタブはどうやれば消えるでしょうか。

[gakki---]

alert のタグはいらなかったですね。
それを消せばいけました。
ありがとうございました。