jqueryで通常時は4000px~5000px、レスポンシブ対応時は6300px~6600pxの時に背景画像を表示したい

前提・実現したいこと

jqueryの処理で通常時は4000pxでフェードインして、5000pxでフェードアウトさせくて、レスポンシブ対応時は6300pxでフェードインして、6600pxでフェードアウトするという処理を行いたいです

発生している問題・エラーメッセージ

下のコードの様に記述すると、900px以下の時はしっかり背景画像が表示されるのですが、elseにあたる900px以上の時の処理が行われなくなってしまいます

該当のソースコード

html
1<div class="b-img"></div>

css
1#access .b-img {
2  position: fixed;
3  background: url(../images/bg.jpg) no-repeat 0 0;
4  background-position: center;
5  background-size: cover;
6  width: 100vw;
7  height: 100vh;
8  left: 0;
9  top: 0;
10  z-index: -1;
11}

jquery
1if(window.matchMedia("(max-width: 900px)").matches){
2  $(function(){
3    let backimg=$('.b-img');
4    backimg.hide();
5    $(window).scroll(function(){
6      let top=$(this).scrollTop();
7      if(top>6300 && top<6600){
8        backimg.fadeIn();
9      } else {
10        backimg.fadeOut();
11      }
12    });
13  });
14} else {
15  $(function(){
16    let backimg=$('.b-img');
17    backimg.hide();
18    $(window).scroll(function(){
19      let top=$(this).scrollTop();
20      if(top>4000 && top<5000){
21        backimg.fadeIn();
22      } else {
23        backimg.fadeOut();
24      }
25    });
26  });
27}

試したこと

ふたつのfunctionにして試した
ifの位置をずらした
自分のわかる範囲で色々試してみたのですが、ダメでした。。。

補足情報（FW/ツールのバージョンなど）

記載するコードの領域が狭すぎたらお手数ですが教えていただければ記載し直します
一人ではどうしても解決できなかったので助けていただければ幸いです

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

回答1件

ベストアンサー

window.matchMedia の使い方を間違ってます。
それだと、読み込み時のみに実行されますので、画面サイズを変更しても、読み込み時の数値のままです。

参考リンク
プログラムによるメディアクエリーのテスト - CSS: カスケーディングスタイルシート | MDN

JavaScriptによるメディアクエリ「window.matchMedia」

上記を参考にして、ブレイクポイント通過時に表示範囲の上辺と底辺の位置を変数に格納します。

その変数をスクロール時イベントでチェックして表示/非表示を切り替えます。
あと、リサイズ時イベントも登録しておいた方がいいでしょう。

css
1$(function () {
2    const mediaQuery = window.matchMedia("(max-width: 900px)")
3    let rangeTop;
4    let rangeBottom;  
5
6    // ページが読み込まれた時に実行
7    handle(mediaQuery);
8
9    // ウィンドウサイズを変更しても実行（ブレイクポイントの監視）
10    mediaQuery.addListener(handle);
11
12    function handle(mm) {
13        if (mm.matches) {
14            // ウィンドウサイズ900px以下のときの処理
15            rangeTop = 6300;
16            rangeBottom = 6600;
17        } else {
18            rangeTop = 4000;
19            rangeBottom = 5000;
20        }
21    }
22
23    let backimg = $('.b-img');
24    backimg.hide();
25    $(window).on("scroll resize", function () {
26        let top = $(this).scrollTop();
27        if (top > rangeTop && top < rangeBottom) {
28            backimg.fadeIn();
29        } else {
30            backimg.fadeOut();
31        }
32    });
33});