I am attempting to implement an on-scroll function that will add a CSS background color attribute to the menu when the user scrolls to a certain point.
However, I am encountering difficulties. I have double-checked the scroll function usage and ensured that the syntax is correct, but the CSS() jQuery function does not seem to take effect as shown in this codepen.
How can I modify the CSS attribute once the user scrolls to a specific point on the screen?
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
$(".top-nav").css('background', 'blue');
} else {
$(".top-nav").css('background', 'transparent');
}
});
});html,
body {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: scroll;
overflow-x: hidden;
}
/* Rest of the CSS code block remains unchanged */<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@600&display=swap" rel="stylesheet">
<script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js"></script>
<div id="grid-wrapper" class="wrapper">
<nav class="top-nav">
<h1>
/* HTML navigation bar content remains untouched */
</nav>
<div id="side-menu" class="side-nav">
/* Side menu content remains normal */
</div>
</div>
<div class="main"></div>