I’ve been researching how to make the navigation bar transparent but I can’t find which mistakes I’ve done. Currently the menu does not change at all could anyone please give me an example of the code I would need to use in order to make it transparent whenever I scroll down.
I am trying to create a fixed navigation menu that will become transparent when the user scrolls down the page. I used the following code:
I expected the menu to gradually become transparent as the user scrolls down, but it remains the original color. Also I tested my code in different browsers to ensure consistent behavior.
I’ve tried adding the following CSS:
.menu {
width: 100%;
position: sticky;
top: 0;
z-index: 1000;
background: linear-gradient(45deg, #f00,#00f);
padding: 10px 0;
margin-bottom: 40px;
}
.menu .transparent {
background: linear-gradient(
45deg,
rgba(255,0,0,0.8),
rgba(0,0,255,0.8)
);
}
Together, this means that the following styles will only apply to elements within the menu when the transparent class is added to them
and here it is on JavaScript:
document.addEventListener('DOMContentLoaded', function () {
const menu = document.querySelector('.menu');
function toggleMenuTransparency() {
if (window.scrollY > 0) {
menu.classList.add('tranparent')
}
else {
menu.classList.remove('transparent');
}
}
window.addEventListener('scroll', toggleMenuTransparency);
});