【レスポンシブ】jQueryのスクロールしたら表示される処理を画面幅で変えたい

実現したいこと

ドロワーメニューを
PC画面では「720px以上スクロールしたら表示」
TAB/SP画面では「スクロールに関係なく常時表示」
とさせたいのですがうまくいかない

詳しい状況

下記のコードを試したところ、画面幅1101px以下(sp,tab表示)の場合でも"JS1"のコードが適応されたままになっており"JS2"のコードが全く働いていない状態の様です。
おそらく"JS2"のコードやもっと根本的なところが間違っているのだと思うのですが原因が分かりません...
どうしたらよいでしょうか

ソースコード

HTML
1<div class="drawer">
2    <ul>
3        <li>メニュー１</li>
4        <li>メニュー2</li>
5        <li>メニュー3</li>
6    </ul>
7</div>

CSS
1drawer {
2　display:block;
3
4    &.is-close {
5        display: none;
6    }
7}

JS1(スクロールして表示・非表示)
1jQuery(window).on("scroll", function() {
2  // トップから720px未満なら
3  if (720 > jQuery(this).scrollTop()) {
4  // is-closeを付けて非表示
5    jQuery('.drawer').removeClass( 'is-close' );   
6  } else {
7  // 720px以上の時はis-closeを外して表示
8    jQuery('.drawer').addClass( 'is-close' );   
9  }
10});

JS2(タブレット以下の画面サイズではスクロールに関係なく表示)
1jQuery(window).resize(function() 
2  //画面幅を取得
3  var windowSize = jQuery(window).width();
4  //タブレット時の画面幅を定義
5  var tab = 1101;
6
7  //もし画面幅が1101px以下の時
8  if(windowSize < tab) {
9     //is-closeを取り除く
10    jQuery('.drawer').removeClass('is-close');    
11  }
12});

試したこと

resizeではなくmatchMediaを使ってみたが効かなかった

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

ここにより詳細な情報を記載してください。

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

回答1件

自己解決

const mq = window.matchMedia('(min-width: ???px)');

// スクロールしたときに関数を呼び出す
window.addEventListener('scroll', () => {
function mqCheck(mq) {
// ビューポートの幅が指定ピクセル以上の場合に実行する
if (mq.matches) {
// 呼び出す関数を記述
}
}
mqCheck(mq);
});