Check If Element Is In View - jQuery inView

A dead simple jQuery is in view plugin which returns true if the top and/or bottom bounds of an element is visible in the viewport when scrolling the webpage.

How to use it:

1. Insert the minified version of the jQuery inView plugin after jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
        crossorigin="anonymous">
</script>
<script src="jQuery-inView.min.js"></script>

2. The JavaScript to check if an element is fully visible in the viewport. Returns true of false.

var isInView = $('.element').inView('both');

3. Check if the top or bottom bounds of an element is visible in the viewport. With or without an offset.

// top
var isInView = $('.element').inView('topOnly');

// bottom
var isInView = $('.element').inView('bottomOnly');

// with offset
var isInView = $('.element').inView('bottomOnly', 100);

4. Apply custom CSS classes to the element when it is scrolled into view.

function checkVisability() {
  $('.element').each(function(){
    if ($(this).inView("both")) {
      $(this).addClass("visible");
    } else {
      $(this).removeClass("visible");
    }
  });
}

checkVisability();


// bind to window scroll event
$(window).scroll(function() {
  checkVisability();
});

Changelog:

2020-07-21

• v1.0.0

---

This awesome jQuery plugin is developed by Mario-Duarte. For more Advanced Usages, please check the demo page or visit the official website.