I am trying to build a website, the JavaScript code that is supposed to add the sticky navigation menu when the header is not visible doesn’t work properly. It was working without any problems when I hosted the website locally; but, when I hosted the website on a server it doesn’t always work.
There are two JavaScript files for different stuff, one works flawlessly. The one that is causing problems is using JQuery, I surmise that maybe it is JQuery that is causing problems.
After reloading the site many times, it starts to work as intended. Also, this error shows up in console when this happens;
script.js:34 Uncaught ReferenceError: $ is not defined
at script.js:34:5
(anonymous) @ script.js:34
Here are the codes that are causing problems.
The JavaScript file;
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');
}
}
The HTML file;
<!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>
I tried loading the script inside the body tag but it didn’t helped at all. I tried downloading JQuery, it also didn’t solved the problem. I tried to remove the async tag, that somewhat worsened the issue. I also tried to incIude a JQuery fallback. I am out of ideas at this point.
Post Scriptum: I suppose these are very inefficient and absurd, sorry for that. Thank you in advance.