Get started with is-in-viewport CDN

MIT licensed

JS function Is-in-viewport checks elements visibility in browser viewport.

Tags:
  • viewport
  • jquery
  • jquery-plugin

Stable version

Copied!

How to start using is-in-viewport CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with is-in-viewport CDN - cdnhub.io</title>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.cdnhub.io/is-in-viewport/3.0.4/isInViewport.min.js"></script>
  <script>
    $(document).ready(function() {
      function isElementInViewport(element) {
        const rect = element.getBoundingClientRect();
        return (
          rect.top >= 0 &&
          rect.left >= 0 &&
          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
          rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
      }

      function checkElementInViewport(element) {
        if (isElementInViewport(element)) {
          console.log(`${element.id} is in the viewport.`);
        } else {
          console.log(`${element.id} is not in the viewport.`);
        }
      }

      const element = document.getElementById("myElement");
      checkElementInViewport(element);

      $(window).on("scroll", function() {
        checkElementInViewport(element);
      });

      $(window).on("resize", function() {
        checkElementInViewport(element);
      });

      // Initialize isInViewport
      $.isInViewport($("#myElement"), function(isInView, viewport) {
        if (isInView) {
          console.log("Element is in viewport now.");
        }
      });
    });
  </script>
  <style>
    #myElement {
      width: 100px;
      height: 100px;
      background-color: red;
      position: fixed;
      bottom: 0;
      left: 50%;
      margin-left: -50px;
    }
  </style>
</head>
<body>
  <div id="myElement"></div>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions