网站上线后jQuery粘性导航菜单间歇性失效问题排查

我搭建的网站里，有一段依赖jQuery的JavaScript代码，用于在头部不可见时添加粘性导航菜单。本地运行完全正常，但部署到服务器后出现间歇性失效的情况，多次刷新后偶尔能恢复正常。出现问题时控制台报错如下：

script.js:34 Uncaught ReferenceError: $ is not defined
    at script.js:34:5
(anonymous) @   script.js:34

问题代码 #

JavaScript文件（script.js）

if (window.location.href.replaceAll(window.location.origin, '').replaceAll('/', '').length === 0 || window.location.href.includes("index.html")) {
    $(window).scroll
        (
            $(window).onload = function () {

                if ($(window).scrollTop() >= 300) {
                    $(window).innerWidth
                        (
                            function () {

                                if ($(window).innerWidth() < 460) {
                                    $('nav').addClass('fixed-header');
                                    $('nav div').removeClass('visible-title');
                                }
                                else {
                                    $('nav').addClass('fixed-header');
                                    $('nav div').addClass('visible-title');
                                }

                            }
                        );


                }
                else {

                    $('nav').removeClass('fixed-header');
                    $('nav div').removeClass('visible-title');
                }
            }
        );
} else {
    if ($(window).innerWidth() < 460) {
        $('nav').addClass('fixed-header');
        $('nav div').removeClass('visible-title');

    } else {
        $('nav').addClass('fixed-header');
        $('nav div').addClass('visible-title');
    }
}

HTML文件

<!DOCTYPE html>
<html lang="tr">

    <head>
        <!-- Google tag (gtag.js) -->
        <script async
            src="https://www.googletagmanager.com/gtag/js?id=XXXXXX"></script>
        <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'XXXXXX');
    </script>

        <script language="JavaScript" type="text/javascript" async src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <script language="JavaScript" type="text/javascript" async src="/script.js"></script>

        <script id="MathJax-script" async
            src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
        <title>Arşiv</title>
        <link rel="icon" type="image/x-icon" href="../RezonansLogo.png">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="../style.css">
    </head>

    <body>
        <header>
            <nav>
                <div class="site-title"><a
                        style="color:white; text-decoration: none"
                        href="../index.html"
                        target="_self">Rezonans Kulübü</a></div>
                <ul>
                    <li><a href="/sayfalar/yazilar.html">Yazılar</a></li>
                    <li><a href="/sayfalar/ekip.html">Ekip</a></li>
                    <ul>
                    </nav>
                </header>
                <section class="content">
                    <article>
                        <h1>Örnek.</h1>
                    </article>
                </section>
            </body>

        </html>

我已经尝试过以下方案，但都没能解决问题：

• 将脚本移动到<body>标签内部
• 下载jQuery到本地并引用本地文件
• 移除脚本标签的async属性
• 添加jQuery降级方案

附言：我知道这些代码可能效率低下且不够规范，对此深表歉意，提前感谢您的帮助。

内容的提问来源于stack exchange，提问作者barkinr