Currently facing a challenge with responsive design - I have implemented a sticky navbar effect that works seamlessly on desktop, but causes usability issues on mobile. When scrolling down on the mobile version, the sticky navbar obscures the text on the screen due to its background color. My intention is for the background color of the sticky nav to appear only when the user taps the mobile hamburger icon, rather than automatically appearing on scroll which can be disruptive. Thank you in advance for any guidance.
I attempted setting the class to display none, but this ended up disabling the sticky navbar on both desktop and mobile devices, whereas my goal is to only disable the sticky navbar background color when users scroll, and show it only when they tap the hamburger icon.
Javascript
$(window).on("scroll", function() {
if ($(window).scrollTop()) {
$('nav').addClass('lightgrey');
} else {
$('nav').removeClass('lightgrey');
}
});
CSS
nav.lightgrey {
height: 400px;
}
The desired result is to have the 'nav.lightgrey' class only visible when users select the mobile hamburger icon.