Как изменить класс при прокрутке к элементу?

Question

[Анастасия]

У меня на сайте есть divы с одинаковой высотой и с одинаковыми классами. Каждый div имеет data-color:

<div class="slide-hero" data-color="orange">
            Content 1
</div>
<div class="slide-hero" data-color="blue">
            Content 1
</div>
<div class="slide-hero" data-color="yellow">
            Content 1
</div>

Когда ширина экрана меньше 1390px или высота меньше 800px, при прокрутке конкретного divу к середине экрана нужно для body добавить его data-color как класс.
Подскажите, пожалуйста, как это сделать

Answer 1

[ThunderCat]

IntersectionObserver