
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.
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(); });
This awesome jQuery plugin is developed by Mario-Duarte. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 12.02.2019
- Source