This time I will share jQuery Plugin and tutorial about Advanced Element Visibility Detector In jQuery – observe.js, hope it will help you in programming stack.
observe.js is an advanced element visibility detector that provides a simple way to execute certain callback functions when an element is visible/invisible, or has ever been in the viewport.
Similar to the Intersection Observer API but with better flexibility and browser compatibility.
Ideal for lazy loading images when they become visible, loading more content as a trigger element has scrolled into view, animating elements once they enter the viewport, and much more.
How to use it:
1. Put the main JavaScript library after loading jQuery library and we’re ready to go.
1 |
<script src="/path/to/cdn/jquery.slim.min.js"></script> |
2 |
<script src="/path/to/jquery.observe.js"></script> |
2. Execute a callback function whenever a selected element enters the viewport.
1 |
<div class="box"></div> |
1 |
$('.box').observe(function(){ |
3. In addition, the plugin automatically add corresponding CSS classes to the document based on the observer.
1 |
<html class="has-observers scrolled-past-top scrolled-to-bottom"> |
4. Execute a callback function whenever the element leaves the viewport.
2 |
'leave-viewport': function(){ |
3 |
alert('leave-viewport') |
5. Execute a callback function when half of the element enters the viewport.
2 |
'enter-half-viewport': function(){ |
3 |
alert('enter-half-viewport') |
6. Execute a callback function when half of the element leaves the viewport.
2 |
'leave-half-viewport': function(){ |
3 |
alert('leave-half-viewport') |
7. Execute a callback function when the element has ever been in the viewport.
2 |
'observed': function(){ |
