Как добавить класс при достижении блока?

const pageAbout = document.querySelector('.about__container');
const position = pageAbout.offsetTop;
const body = document.querySelector('body');
const height = pageAbout.offsetHeight;
window.addEventListener("scroll", function (e) {
    var scroll = body.scrollTop;
    if (scroll > position && scroll < (position + height)) {
        pageAbout.classList.add("_active")
    } else {
        pageAbout.classList.remove("_active")
    }
});

.header{
  height: 1000px;
}

.about__container{
  background: red;
  min-height: 400px;
}

.about__container._active{
  background: green;
}

.footer{
  height: 1000px;
}

<div class="header"></div>
<div class="about__container"></div>
<div class="footer"></div>