[jQuery]ページ最下部までスクロールしたら、という条件が動作しない

度々お世話になります。

ページ内「Links」の項目を表示しているとき、もしくはページ最下部までスクロールしたとき、メニューのLinksのブロックのみ色が変わる
というコードを書いたのですが、一部の環境でしか動作しませんでした。

【現象の詳細】
想定では、最下部までスクロールすると、メニュー内のLinksのブロックの色が濃いビビッドピンクになるはずでした。
しかし、スクロールしただけでは色が変わらず、メニューのLinksをクリックして飛んだ際にだけ色が変わる(もしくはそれでも変わらない)という現象が一部の環境で起きています。

【実際のサイト】
こちらになります。

【コード】

JS
1$(document).ready(function(){
2
3  $(window).on('scroll',function(){
4
5    let now = $(window).scrollTop();
6
7    $('#menublock4 .current, #menublock4 .sidemenu, #menublock4 .menubar').each(function() {
8      let posTop4 = $('#links').offset().top;
9      let posBottom4 = $('#links').offset().top + $('#links').outerHeight();
10
11      let docHeight = $(document).innerHeight(),
12      windowHeight = $(window).innerHeight(),
13      pageBottom = docHeight - windowHeight;
14
15      let works =  $('#menublock3 .current, #menublock3 .sidemenu, #menublock3 .menubar')
16
17      if(posTop4 < now && now <= posBottom4) {
18        $(this).addClass('vivid');
19      } if(pageBottom <= now) {
20        $(this).addClass('vivid');
21        works.removeClass('vivid');
22      } else {
23        $(this).removeClass('vivid');
24      }
25    });
26
27  });
28
29});

【動作する環境】
Chrome (Windows PCでの通常の閲覧)
Edge (Windows PCでの通常の閲覧)

【動作しない環境】 ※()内はChromeやEdgeの開発者ツール上での動作確認
Firefox (Windows PCでの通常の閲覧)
Pixel3a Chrome
dtab d-41a Chrome
iPhone SE 第2世代 Chrome
(Pixel5)
(Galaxy S8+)
(Galaxy S20 Ultra)

【試したこと】
スクロール量の取得方法をdocument.body.scrollTopとdocument.documentElement.scrollTopに変える
→Edge、Chromeでも動作しなくなる
スクロール量の取得方法を$(window).scrollTop()とdocument.body.scrollTopとdocument.documentElement.scrollTopの併用にする
→変化なし

狙い通りに色が変わるようなプログラムは作れるものなのでしょうか？
また、可能な場合はどのような方法で行えば良いのでしょう？

当方JavaScriptの学習を始めたばかりで、至らぬ点があるかもしれません。申し訳ございません。
不足している情報などございましたらお申し付けください。よろしくお願いいたします。

Lhankor_Mhy

2022/08/04 03:25

マルチポストは非推奨です。 https://teratail.com/help#:~:text=%E3%82%84%E3%82%80%E3%82%92%E5%BE%97%E3%81%99%E3%82%99%E8%A4%87%E6%95%B0%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AB%E8%B3%AA%E5%95%8F%E3%82%92%E6%8A%95%E7%A8%BF%E3%81%95%E3%82%8C%E3%81%9F%E5%A0%B4%E5%90%88%E3%81%AF

Lhankor_Mhy

2022/08/04 03:27

これかな？ https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10265753620

nkfn_39

2022/08/04 03:58

お教えいただきありがとうございます。勉強不足で申し訳ございません。テラテイルの不具合の関係で最初は知恵袋に投稿したのですが、知恵袋のほうは自己解決ができないこともあり、削除してしまおうかと迷っていたところでした。問題なければ知恵袋のほうを削除いたします。

Lhankor_Mhy

2022/08/04 04:14

当方の環境（Firefox）で試したところ、動作しているように見えました。「動作しません」とは具体的には何が起きていますか？

nkfn_39

2022/08/04 05:00

昨日の当方の質問でご紹介したURLをご確認いただいたのでしょうか？ありがとうございます。現在、昨日最初に貼ったURLから改善したものを動作確認しております。公開してみましたのでお手隙でしたらご確認ください。 http://nfre.moo.jp/test2/NefriePortfolio.html 現在再度動作確認をしたところ、やはり当方のPCのFirefoxやAndroidのChrome、iPhoneなどでは想定通りに動かないようです。想定では、最下部までスクロールすると、メニュー内のLinksのブロックの色が濃いビビッドピンクになるはずでした。しかし、スクロールしただけでは色が変わらず、メニューのLinksをクリックして飛んだ際にだけ色が変わる(もしくはそれでも変わらない)という現象が起きています。上手くお伝えできていなかったようですので、質問文の修正を行いたいと思います。度々ご対応いただきましてありがとうございます。

Lhankor_Mhy

2022/08/04 05:20

いえ、ご提示のコードをそのまま試しました。ご提示のページは後ほど拝見します。

Lhankor_Mhy

2022/08/04 09:11

ページを拝見しましたが、現象は再現しませんでした。ページの一番下までスクロールすると、メニューのLinksの色が変わります。

nkfn_39

2022/08/04 09:27

お忙しい中ご確認いただき誠にありがとうございます。私のFirefox(WindowsPCより閲覧)ですと何度試しても色が変わらないようです。また、AndroidのChromeだと想定通りの挙動をする場合と、想定通りには挙動しない場合があるようです。 iPhoneで見た際にも、Worksの色が変わったままでLinksの色は変わりませんでした。知人にも確かめてもらえないか尋ねてみようと思います。ご助力感謝いたします。

Lhankor_Mhy

2022/08/04 11:06

手持ちのiPhone12mini（iOS15）でも問題ありませんでした。

nkfn_39

2022/08/05 07:15

ご報告ありがとうございます。知人(Android使用)にも確認してもらったのですが、やはりメニューLinksの色は変わらなかったようです。動く環境と動かない環境があるようですね……