Определение расстояние от края браузера и элемента

[Сергей Ракипов]

Сергей Ракипов,
изменяемый параметр лучше проверять перед условием!

Что то вот это не понял это как?

с переносом строки все понятно

const tsifra_1 = document.querySelector(".tsifra_1");

let anim1 = () => {
    const windowInnerWidth = document.documentElement.clientWidth
    if(windowInnerWidth >= 800){
    let ikonka1 = tsifra_1.getBoundingClientRect();
    tsifra_1.classList.toggle( "tsifra_1_1", ikonka1.top <= 500 );
    }
    else if(windowInnerWidth <= 800){
        let ikonka1 = tsifra_1.getBoundingClientRect();
        tsifra_1.classList.toggle( "tsifra_1_1", ikonka1.top <= 100 );
        }
    console.log(windowInnerWidth);
};
window.addEventListener( "scroll", anim1);
anim1();

[рони]

Сергей Ракипов,
windowInnerWidth --- ширину экрана можно изменить, поэтому использовать значение измеренное один раз, может дать неверный результат, лучше использовать текущее значение, а не то, которое было при загрузке страницы.

[Сергей Ракипов]

Сергей Ракипов,
windowInnerWidth --- ширину экрана можно изменить, поэтому использовать значение измеренное один раз, может дать неверный результат, лучше использовать текущее значение, а не то, которое было при загрузке страницы.

А понял вот о чем речь то есть нужно отслеживать событие ресайз?

[рони]

А понял вот о чем речь то есть нужно отслеживать событие ресайз?

???
в anim1 надо измерять и да назначить эту функцию на события, и resize и scroll

[Сергей Ракипов]

???
в anim1 надо измерять и да назначить эту функцию на события, и resize и scroll

Ну то есть в anim1 нужно повесить два события, а разве так можно что на одну функцию вещать два события resize и scroll

[рони]

Ну то есть в anim1 нужно повесить два события,

...

const tsifra_1 = document.querySelector(".tsifra_1");

        let anim1 = () => {
            const windowInnerWidth = document.documentElement.clientWidth
            if (windowInnerWidth >= 800) {
                let ikonka1 = tsifra_1.getBoundingClientRect();
                tsifra_1.classList.toggle("tsifra_1_1", ikonka1.top <= 500);
            } else if (windowInnerWidth <= 800) {
                let ikonka1 = tsifra_1.getBoundingClientRect();
                tsifra_1.classList.toggle("tsifra_1_1", ikonka1.top <= 100);
            }
            console.log(windowInnerWidth);
        };
        window.addEventListener("scroll", anim1); //запуск во время прокрутки
        window.addEventListener("resize", anim1); //запуск при изменении размеров окна
        anim1(); //запуск при формировании страницы(загрузка)

[Сергей Ракипов]

рони,
Ну я так и подумал.
Просто засомневался когда про два событие и в моей голове начало рисовать что то не вообразимое из серии вот так

window.addEventListener("scroll", "resize", anim1);

А так спасибо.
И тут больше вопрос из любопытство, а когда вот это "resize" вешаешь это не сильно загружает страницу браузера?

[Сергей Ракипов]

А интересно вместо пикселей можно сделать проценты?

[рони]

а когда вот это "resize" вешаешь это не сильно загружает страницу браузера?

раз в 100 меньше чем scroll

А интересно вместо пикселей можно сделать проценты?

можно если использовать IntersectionObserver параметр threshold

[Сергей Ракипов]

раз в 100 меньше чем scroll

Звучит очень логично.