Я думал об этом но мне не хватает "живого" примера что бы разобраться. не поможете?

Как бы то не было, как всегда СПАСИБО!

https://javascript.ru/forum/misc/828...tml#post538886

https://javascript.ru/forum/dom-wind...tml#post533705

https://javascript.ru/forum/dom-wind...tml#post534123

рони,
Спасибо это то что нужно, я еще видео уроки нашел
Спасибо

Я посмотрел почитал.
И из всего этого я могу сделать тоже самое но только идентичный код.
Я пробую его подстроить по свои нужды и у меня не выходит я не понимаю последовательность того что и должно быть написано. Да я читаю и вроде все понятно но когда сам пробую не понимаю как правильно все сделать.

Я понимаю что нужно записать вот эти переменные

const blok = document.querySelector(".blok");
        const windowInnerWidth = document.documentElement.clientWidth;
        const intersectionObserver = new IntersectionObserver;

Понимаю что вот это

let ikonka1 = blok.getBoundingClientRect();
blok.classList.toggle("blok2", ikonka1.top >= 100);

Заменить на это

let options = {  
            root: document.querySelector('.blok'),  
            rootMargin: '5px',  
            threshold: 0.5
        };

И как то нужно правильно записать

blok.classList.toggle("blok2",

Я прочитал и понял как это работает, но не могу все это реализовать.