追従ボタンに、スクロールしているときだけ背景色をつけたい

やりたいこと

長いコンテンツの下にボタン群があり、
本来ならスクロールしなければ隠れている位置にボタンがあるときも、ページ下部に固定表示したいと考え、position: sticky;を使用しました。
動きとしては、position: sticky;でやりたいことをクリアできたのですが、
スクロール中でボタン群がページ下部に固定されている時は、ボタン群に背景色をつけたいです。

##分からない・解決したいこと
cssだけでは実現できなさそうで、Javascriptで
本来のボタン群の位置にスクロールが来た際には、classを追加（それ以外はclassを外す）して、背景色をコントロールできないかと考えて下記のようにしました現コードのようにしましたが、うまくいきません。（参考にいたしました→https://hacknote.jp/archives/33094/）

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>test</title>
6  </head>
7  <body>
8
9      <main>
10        <article class="wrapper">
11
12            <section class="content">
13              ここに内容が入ります。
14            </section>
15
16            <section class="sticky-nav">
17              <ul class="btn__area">
18                <li class="btn__area--btnRed"><button type="button">ボタンA</button></li>
19                <li class="btn__area--btnWhite"><button type="button">ボタンB</button></li>
20              </ul>
21            </section>
22          </div>
23
24      </main>
25
26      <footer class="footer">
27        <section class="footer__content">
28          <p class="footer__logo">フッター</p>
29        </section>
30      </footer>
31  </body>
32</html>
33

css
1      body {
2        overflow-x: hidden;
3      }
4      .wrapper {
5        padding-bottom: 100px;
6        background: #ccc;
7      }
8      .content {
9        display: flex;
10        justify-content: center;
11        align-items: center;
12        margin: 0 auto;
13        width: 700px;
14        height: 1350px;
15        background: #E3E3E3;
16      }
17      .btn__area {
18        display: flex;
19        align-items: center;
20        justify-content: center;
21        padding: 15px 0;
22      }
23      .btn__area li {
24        margin-right: 24px;
25        list-style: none;
26      }
27      .btn__area li:last-child {
28        margin-right: 0;
29      }
30      .btn__area--btnRed button,
31      .btn__area--btnWhite button {
32        display: flex;
33        align-items: center;
34        justify-content: center;
35        width: 150px;
36        height: 40px;
37        background: #ff0000;
38        border: 1px solid #ff0000;
39        border-radius: 30px;
40        color: #fff;
41        font-weight: bold;
42      }
43      .btn__area--btnWhite button {
44        background: #fff;
45        border: 1px solid #333;
46        border-radius: 30px;
47        color: #333;
48      }
49      .sticky-nav {
50        margin: 0 calc(50% - 50vw);
51        width: 100vw;
52        position: sticky;
53        bottom: 0;
54        background: #333;
55      }
56      .footer {
57        padding: 50px 0;
58        background: #000;
59        color: #fff;
60      }
61      .footer__content {
62        margin: 0 auto;
63        width: 700px;
64      }

Js
1      $(window).on('scroll', function () {
2        var doch = $(document).innerHeight(); //ページ全体の高さ
3        var winh = $(window).innerHeight(); //ウィンドウの高さ
4        var bottom = doch - winh; //ページ全体の高さ - ウィンドウの高さ = ページの最下部位置
5        var $btnMenu = document.getElementByClassName('sticky-nav');
6        if (bottom + '326px'  <= $(window).scrollTop()) {
7        $btnMenu.classList.add("is-fixed");
8        }else{
9          $btnMenu.classList.remove("is-fixed");
10        }
11      });

解決方法を教えていただきたいです。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

Intersection Observer を使ってみてはいかがでしょうか。
Intersection Observer API - Web API | MDN

js
1let options = {
2    rootMargin: "0px 0px -80px 0px" // 適当に調整してください。
3}
4
5let callback = (entries, observer) => {
6    entries.forEach(entry => {
7        if (entry.isIntersecting) {
8            entry.target.classList.add("is-fixed") // 逆かな？
9        } else {
10            entry.target.classList.remove("is-fixed")
11        }
12    });
13};
14
15let observer = new IntersectionObserver(callback, options);
16
17var target = document.querySelector('.sticky-nav');
18observer.observe(target);