I am having trouble changing the color of my navigation bar from transparent to black after the user scrolls down. Despite trying various methods and watching tutorials, I can't seem to get it to work.
HTML
<nav role='navigation' class="sticky-top bg-transparent">
<img class="navbar-brand" src="../static/website_Images/logo.jpg" alt="Logo" style="height:90px;">
<div id="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<a href="/"><li>Home</li></a>
<a href="/image_submit"><li>Submit Image</li></a>
<a href="/image_search"><li>Search Image</li></a>
<a href="/login"><li>Login/Sign up</li></a>
</ul>
</div>
</nav>
JS
<script >
$(window).scroll(function(){
$('nav').toggleClass('scrolled', $(this).scrollTop() > 100);
});
</script>
CSS
.bg-transparent{
height: 90px;
}
.bg-transparent.scrolled{
background: black !important;
}