структура HTML
<div>Верхнее меню</div>
<header>Заголовок sticky всегда висит наверху</header>
<div class="items">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 2</div>
</div>
Задача при скроле блока items когда Item N доходит до шапки он постепенно менял прозрачность и уходил на нет, и так же обратно при скроле в обратную сторону.
const Observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
entry.target.classList.toggle('is-active', entry.isIntersecting);
});
}, {
rootMargin: '0px 0px -90% 0px',
threshold: 0
});
document.querySelectorAll('.item').forEach(element => {
Observer.observe(element);
});