Как сделать, чтобы при перекрытии навигацией блока container к навигации добавлялся класс active? на чистом js
<!DOCTYPE html>
<html>
<body>
<nav class="nav" style="display: fixed;"></nav>
<section class="container"></section>
<div style="height: 1000px"></div>
<section class="container"></section>
<div style="height: 1000px"></div>
<section class="container"></section>
<div style="height: 1000px"></div>
<script>
var nav = document.querySelector('.nav');
function navGallery(){
let containers = document.getElementsByClassName('container');
for(var i = 0; i < containers.length; i++){
let container = containers[i].getBoundingClientRect();
//если контейнер находится под блоком навигации, то добавляем ему класс active
if(container.top < 0 && container.bottom > 0){
nav.classList.add('active');
} else {
nav.classList.remove('active');
}
}
}
navGallery();
window.addEventListener('scroll', navGallery);
</script>
</body>
</html>