Is there a way to change the color of my burger bar lines using event listeners? I'm trying to target the spans that make up the burger menu lines by assigning them a class "span". Here's what I have:
var distFromTop = document.querySelector(".om-mux").offsetTop;
var distFromTop2 = document.querySelector(".galleri").offsetTop;
var distFromTop3 = document.querySelector(".event-sektion").offsetTop;
window.addEventListener("scroll", function() {
var scroll = this.scrollY;
if (scroll > distFromTop && scroll < distFromTop2) {
document.querySelector(".span").style.backgroundColor = "black";
} else if (scroll > distFromTop2 && scroll < distFromTop3) {
document.querySelector(".span:before").style.backgroundColor = "white";
} else if (scroll > distFromTop3){
document.querySelector(".span").style.backgroundColor = "black";
} else {
document.querySelector(".span").style.backgroundColor = "white";
}
})`
The code is working fine, but it only changes the style of the middle span because the upper and bottom lines are styled like this:
` .menu-btn > span,
.menu-btn > span::before,
.menu-btn > span::after {
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: #ffffff;
transition-duration: .25s;
}`
How can I target span:before & span:after elements? Can I achieve this with something like:
document.querySelector(".span:before").style.backgroundColor = "white";