Как изменить цвет Navbar по запросу? ⇐ Javascript

[Anonymous]

Я хочу изменить цвет Navbar, когда мой конкретный Div попадает в верхнюю часть страницы. Это только по моему второму запросу, а не на моем первом, хотя консоль говорит, что работает. Фореш. Может быть, это как -то связано с этим, но я также написал это отдельно, и это не работает. Funippet-Code ">

Код: Выделить всё

const boxes = document.querySelectorAll('.Boxes');
const navContainer = document.querySelector('.nav-container');
const navItems = document.querySelectorAll('.nav-item');
const lines = document.querySelectorAll('.line');

window.addEventListener('scroll', function() {
boxes.forEach((box) => {
let boxRect = box.getBoundingClientRect();

if (boxRect.top = 100) {
navContainer.style.backgroundColor = "#6a994e";
//console.log(navContainer.style.backgroundColor);
navItems.forEach((item) => {
item.style.color = "white";
})
lines.forEach((line) => {
line.style.backgroundColor = "white";
})
} else {
navContainer.style.backgroundColor = "white";
navItems.forEach((item) => {
item.style.color = "#6a994e";
})
lines.forEach((line) => {
line.style.backgroundColor = "#6a994e";
})
}
})
});< /code>
body{
margin: 0;
padding: 0;
font-family: Arial;
overflow-x: clip;
}

.nav-container{
width: 100%;
height: 75px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 75px;
padding: 10px 50px;
background-color: white;
color: black;
position: fixed;
top: 0;
left: 0;
z-index: 5;
transition: all 0.5s linear;
}

.menu-container{
display: inline-grid;
justify-items: end;
align-items: center;
}

.icon{
position: relative;
width: 40px;
height: 40px;
border: none;
background-color: transparent;
z-index: 2;
}

.menu-container .icon .line{
width: 80%;
height: 2px;
background-color: #6a994e;
position: absolute;
transition: transform 0.6s linear;
}

.menu-container .icon .line1{
top: 15px;
left: 5px;
}
.menu-container .icon .line2{
bottom: 15px;
left: 5px;
}

.boxes{
background-color: #6a994e;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow-x: hidden;
animation: theater;
animation-timeline: view();

}

@keyframes theater{
0%{
transform: scale(1);
} 50% {
transform: scale(2);
}
}< /code>


[i][/i]
LOGO





[list]
[*]Home
[*]Gallerij
[*]Contact
[/list]






text





text

Подробнее здесь: https://stackoverflow.com/questions/794 ... on-request