JavaScriptで特定の要素の高さを取得し、その高さスクロールが過ぎたらヘッダー背景を変えたい

Question

JavaScript初心者です。
トップページは全画面のファーストビューを通り過ぎたら固定ヘッダーの背景色を黒くし、下層ページでは600pxや400pxなどの高さのキービジュアルが通り過ぎたら固定ヘッダーの背景を黒くしたいのですが、いろんなサイトを参考にしながらコードを書いていますが、うまく機能してくれません。
どなたかわかる方ご教示いただきたいです。
下記JSコードはいろいろ調べながら自分なりに書いたコードです。

ブラウザでは
Uncaught ReferenceError: $window is not defined
at script.js:19
at script.js:28
というエラーが出ています。

<header>
<h1>テスト</h1>
 <nav>
  <ul>
   <li><a>aaa</a></li>
   <li><a>bbb</a></li>
   <li><a>ccc</a></li>
  </ul>
 </nav>
</header>
<main>
<div class="kv-animation"></div>
・
・
・
</main>

.bg-on {
gackground: black;
}

  // ヘッダー規定位置から変化
  //.kv-animation要素↓
  var header = $(".header")
  var kvAnimation = $(".kv-animation");
  //スクロール量↓
  $scrollTopDistance = $(window).scrollTop();
  //.kv-animationの高さ量↓
  var $kvAnimationHeight = kvAnimation.outerHeight(true);
  $scrollTopDistance = $(window).scrollTop();//スクロール量を取得
  $window.on('scroll', function () {//スクロール操作するたびに起動
    if ($scrollTopDistance >= $kvAnimationHeight) {//もしスクロール量が.kv-animationの高さを上回ったら
      //クラスを追加する
      header.addClass('bg-on');
    } else if ($scrollTopDistance <= $kvAnimationHeight) {//もしスクロール量が.kv-animationの高さを下回ったら。
      //クラスを除去する
      header.removeClass('bg-on');
    }
  });

Answer 1

少なくとも、$window.on⇒$(window).on です。

Comments

[Web-Fuji]

おかげさまでエラーはなくなりました！
ありがとうございます！

ただ、依然、bg-onクラスがheaderに付かない状態です。。泣

[kei344]

「gackground: black;」は「background-color: black;」では？

あと、スクロールイベントの中で「$scrollTopDistance = $(window).scrollTop();」を実行する必要があると思います。

[kei344]

デベロッパーツールで値が確認できるので、自分が思っている値が入っているかを確認しつつ試してみてください。

【ChromeのデベロッパーツールでJSをデバッグする方法（2019年版） - ICS MEDIA】
https://ics.media/entry/190517/

Answer 2

  $(function () {
    var imgHeight = $('.kv-animation').outerHeight();
    var header = $('header');

    $(window).on('load scroll', function () {
      if ($(window).scrollTop() < imgHeight) {
        header.removeClass('bg-on');
      } else {
        header.addClass('bg-on');
      }
    });
  });

上記コードで意図する動きになり解決しました。

https://tanomasaki.com/tech/scroll-change-headernav/
↑こちらの記事を参考にしました。

コメントお寄せくださった皆様、本当にありがとうございました！

Answer 3

まず勘違いしやすいのですが、$というのは単なる名前で、jQueryの関数の一つに過ぎません。これが何をしているのかと言うと、文字列を渡すとDOM（Document Object Model）というものを取得してくれます。平たく言えばHTMLをJavaScriptで扱えるデータにします。

さて、あらためてコードを見るとおわかりでしょうか。

 var kvAnimation = $(".kv-animation");

などはただ単純にDOMを取得しているだけで高さなどの情報を取得しているわけではありません。実際に取得するにはそのための関数が必要です。

いきなりスクロール系を取り扱うのは難しいと思われますのでまずはDOMの操作で背景色を変える、といったところから始めてみてはいかがでしょうか。

Comments

[kei344]

var $kvAnimationHeight = kvAnimation.outerHeight(true);で採ってるのでは？

[A_kirisaki]

おっと、たしかに取ってはいますね。