Добавьте класс, когда пересекает наблюдатель, пропускает элемент, прокручиваясь вниз и удаляет, когда вверх? ⇐ Javascript

[Anonymous]

Я пытаюсь переключить класс, когда пересекающий наблюдатель проходит определенный элемент. p>
работает, но, к сожалению, не каждый раз и не в правильном месте. Как добавить /удалить класс, когда элемент едва виден в нижней части экрана? -code ">

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

const options = {
root: null,
//   rootMargin: '50px',
threshold: 0.1
}

const observer = new IntersectionObserver(
([entry]) => {

if (entry.isIntersecting) {

// up
if (entry.boundingClientRect.top < 0) {
document.querySelector('button').classList.remove('hidden');
} else {
//down
document.querySelector('button').classList.add('hidden')
}
}
},
options
);

const arr = document.querySelectorAll('h2')
arr.forEach(i => {
observer.observe(i)
})< /code>
h2 {
margin-top: 700px;
margin-bottom: 700px;
}

button {
position: fixed;
top: 0;
left:0;
}

button.hidden {
background: red !important;
}< /code>

ELEMENT



FIXED BUTTON

Подробнее здесь: https://stackoverflow.com/questions/794 ... n-and-remo