“Добавить класс, когда элемент в Viewport Vanilla JavaScript” Ответ

Добавить класс, когда элемент в Viewport Vanilla JavaScript

window.addEventListener('scroll', function (event) {
    if (isInViewport(theElementToWatch)) {
      // update the element display
    }
}, false);
code fighter

Добавить класс, когда элемент в Viewport Vanilla JavaScript

function isInViewPort(element) {
    // Get the bounding client rectangle position in the viewport
    var bounding = element.getBoundingClientRect();

    // Checking part. Here the code checks if it's *fully* visible
    // Edit this part if you just want a partial visibility
    if (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth) &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)
    ) {
        console.log('In the viewport! :)');
        return true;
    } else {
        console.log('Not in the viewport. :(');
        return false;
    }
}
code fighter

Ответы похожие на “Добавить класс, когда элемент в Viewport Vanilla JavaScript”

Вопросы похожие на “Добавить класс, когда элемент в Viewport Vanilla JavaScript”

Больше похожих ответов на “Добавить класс, когда элемент в Viewport Vanilla JavaScript” по JavaScript

Смотреть популярные ответы по языку

Смотреть другие языки программирования