JQを使用して、overflow: hidden;で、メニュー欄を固定しようと考えているが出来ません。

JQ素人です。
先程から、色々なサイトを確認しながら、CSSの、
overflow: hidden;を使ってメニュー欄を開いたときに、
画面をスクロールできないようにしようとしていますが、うまくいきません、

header部分

コード
<!DOCTYPE html>
<?php
/*
template Name:トップページ
*/
?>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="keywords" content="共通キーワード" />
  <meta name="description" content="共通ディスクリプション" />

  <title>Engress</title>
  <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/assets/css/styles.css" />
  <?php wp_head(); ?>
</head>
<body class="body">
<header class="azzza"> 
    <div class="zzz">   

    <div class="asdg">      
    <div class="aaaaaa aaaaaaa"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/logo1.png"/></div>
    <nav class="aaa">
        <ul class="aaaa">
            <li class="aaaaaa x"><a>ホーム</a></li>
            <li class="aaaaaa x"><a>お知らせ</a></li>
            <li class="aaaaaa x"><a>ブログ</a></li>
            <li class="aaaaaa x"><a>コース・料金</a></li>
        </ul>
    </nav>
    </div>   
    
    <div class="b">
            <div class="xxx">
         <p class="z">平日8:00~20:00</p>
         <div class="zzz">
        <p class="zzzz"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/pus 29.png" class="main-logo" alt="Engress"/></p>
            <div class="zz">0123-456-7890</div>
        </div>    
        </div>
        <div class="bbb">
            <div class="bbbb">
                <a href="#" class="bbbbb"  style="text-decoration: none;"><p class="xx">資料請求</p></a>
                <a href="#" class="bbbbbb"  style="text-decoration: none;"><p class="xx">お問い合わせ</p></a>
            </div>
        </div>
        <div class="as">
        <div class="ass asss"></div>
        <div class="ass assss"></div>
        <div class="ass asssss"></div>
    </div>
     </div>
     </div>
    </div>
    
</header>

フッター部分のJQ部分

PHPのJQ
1
2
3<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
4
5<script>
6    $(function(){
7        $(".faq dt").on("click",function(){
8            $(this).next().slideToggle();
9            $(this).toggleClass("open");
10        })
11    })
12
13//sticky header
14$(function() {
15  $('.as').on('click',function(){
16          $('.aaa').fadeToggle(300);
17          $('.as').toggleClass('cross');
18          $('body').toggleClass('noscroll');
19        });
20});
21//ハンバーガーメニューの開閉 
22</script>
23<?PHP wp_footer(); ?>
24</body>
25</html>

CSS
1
2/* ========================================
3タブレット
4========================================= */
5
6@media screen and (max-width: 1024px){
7    .xxx{
8        display: none;
9    }
10    .bbb{
11        display: none;
12    }
13    
14    .ass{
15        height: 3px;
16        width: 30px;
17        background-color: #1B224C;
18        display: block;
19        position: absolute;
20        top: 10px;
21    }
22
23    .as{
24        background-color:transparent;
25        position: absolute;
26        top: 30px;
27        right: 30px;
28        border: none;
29        cursor: pointer;
30        outline: none;
31        appearance: none;
32        height: 20px;
33        width: 30px;
34    }
35
36    .asss{
37        margin-top: -10px;
38    }
39
40    .asssss{
41        margin-top: 10px;
42    }
43
44    /* ハンバーガーメニューが開いたとき */
45  .as.cross .asss {
46    transform: rotate(40deg) translate(6px,8px);
47    transition: .3s;
48    background-color: #fff;
49  }
50
51  .as.cross .assss{
52    opacity: 0;
53    transition: .3s;
54  }
55
56  .as.cross .asssss{
57    transform: rotate(-40deg) translate(6px,-8px);
58    transition: .3s;
59    background-color: #fff;
60  }
61
62 
63body.noscroll{
64    overflow: hidden;
65    position: relative;
66  }
67
68  .aaa {
69    display: none;
70    position: fixed;
71    top: 0;
72    left: 0;
73    width: 100%;
74    height: 100vh;
75    background-color: #282F35;
76  }
77
78  .aaaa{
79    height: 100%;
80    flex-direction: column;
81    justify-content: center;
82    align-items: center;
83  }
84
85  .aaaaaa{
86    margin: 0 0 20px;
87    color: #fff;
88  }
89
90  .aaaaaa:last-of-type {
91    margin-bottom: 0;
92  }
93
94