After creating a navbar with a transparent background, I am now using JavaScript to attempt changing the navigation bar to a solid color once someone scrolls down.
The issue is that when scrolling, the box-shadow at the bottom of the navbar changes instead of the color.
Expectation for the navigation bar to change colors on scroll:
.navbar-scrolled{
background-color: #fff;
color: #000;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}
<script>
const navEl = document.querySelector('.navbar');
window.addEventListener('scroll', () => {
if (window.scrollY >= 56) {
navEl.classList.add('navbar-scrolled');
}
else if (window.scrollY < 56) {
navEl.classList.remove('navbar-scrolled');
}
});
</script>