DOM Element Detector Is Visible Using jQuery

DOM-element-detector is a very small script for jQuery that calculates an element’s position from the top of the page and then performs custom functions when the element becomes visible/invisible on scroll.

jquery check if element is visible on screen, check if element is display none jquery, jquery check if element is visible in scroll div, javascript check if element is visible on screen

How to make use of it:

1. Load the mandatory jQuery library within the doc.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

2. The major function to detect if a component is visible/invisible.

let scrollTop = $(this).scrollTop();
function domElemDetector(el) {
  if ($(el).length) {
    let elemOffsetTop = el.offset().top
    let elemHeight = el.outerHeight();
    let windowHeight = $(window).outerHeight();
    if (scrollTop >= (elemOffsetTop - (windowHeight / 2))) {
      // do some cool stuff when the element is visible
    } else {
      // do some cool stuff when the element is invisible
    }
  }
}

3. Apply the DOM Element Detector to your component.

<div class="element">
  ...
</div>

domElemDetector($('.element'));

4. Enable the DOM Element Detector on the web page scroll.

$(document).ready(function () {
  $(function () {
    $(window).on('scroll', function () {
      let scrollTop = $(this).scrollTop();
      function domElemDetector(el) {
        if ($(el).length) {
          let elemOffsetTop = el.offset().top
          let elemHeight = el.outerHeight();
          let windowHeight = $(window).outerHeight();
          if (scrollTop >= (elemOffsetTop - (windowHeight / 2))) {
            // do some cool stuff when the element is visible
          } else {
            // do some cool stuff when the element is invisible
          }
        }
      }
      domElemDetector($('.element'));
    });
  });
});

Check Whether A DOM Element, DOM-element-detector Plugin/Github, jquery check if element exists, jquery visibility hidden