My jQuery code seems to be functioning properly in online text editors like Fiddle and StackOverflow snippets. However, when I try to implement the same code in Brackets or view it on GitHub, the navbar scroll down animation fails to work as expected. You can find the exact code that works in Fiddle but not in Brackets and GitHub Pages by clicking here, along with a random background image I used.
$(document).ready(function() {
$(window).scroll(function() {
if ($(document).scrollTop() > 10) {
$('#nav').addClass('shrink');
} else {
$('#nav').removeClass('shrink');
}
});
});// CSS CODE HERE<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
// LINKING STYLESHEETS AND FONTS
</head>
<body>
<div class="bg-img">
<header>
<div id="nav">
<!-- NEW BACKGROUND ELEMENT GOES HERE -->
<div class="background"></div>
<nav class="container">
<div class="menu1">
<a id="navLinks" href="#home">Home</a>
</div>
// NAVIGATION ITEMS
<!-- CLUSTER OF INFORMATION -->
</div>
</header>
<div class="Minfo">
<div class="subtitle">
TITLE<br>
<div class="title">
Subtitle
</div>
<br>
<div class="subtext">
Additional Info
</div>
</div>
</div>
</div>
</body>
</html>