Verifica componente na tela

by Abner Rodrigues

HTML

<div id="main">
<div class="box"></div>
<div id="message">Scrola pra baixo pra ver a caixa</div>

</div>

CSS

#main {
  position: relative;
  height: 1500px;
}

.box {
  border: 1px solid #666;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 506px;
}

#message {
  position: fixed;
  top: 0;
  background: #fff;
}

JavaScript

function isInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)

    );
}


const box = document.querySelector('.box');
const message = document.querySelector('#message');

document.addEventListener('scroll', function () {
    const messageText = isInViewport(box) ?
        'a caixa ta visivel no viewport' :
        'epa, cade a caixa?';

    message.textContent = messageText;

}, {
    passive: true
});