Check If Is Visible Within The Viewport - jQuery isOnScreen

Check If Is Visible Within The Viewport - jQuery isOnScreen
File Size: 4.77 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

isOnScreen is a small yet useful jQuery viewport detection plugin that tests if a node is positioned within the current viewport. By default, the plugin tests if at least 1 pixel is showing, regardless of orientation - however an optional argument is accepted, a callback that is passed the number of pixels distant between each edge of the node and the corresponding viewport.  If the callback argument is provided the return value (true of false) of that callback is used instead.

How to use it:

1. Download and insert the jquery.isonscreen.js after jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.isonscreen.js"></script>

2. Call the function on the target element. This will return true if at least 1 pixel is visible within the current viewport.

<div class="box">
  Test
</div>
$(function(){
  $('.box').isOnScreen();  

});

3. This example will return true if at least the top 30px of the element is visible within the current viewport:

$('.box').isOnScreen(function(deltas){
  return deltas.top >= 10 && deltas.bottom >= 10;
});

4. If you want to detect if the element is entirely visible within the current viewport:

$('.box').isOnScreen(function(deltas){
  return deltas.top >= this.height() 
    && deltas.bottom >= this.height()
    && deltas.left >= this.width()
    && deltas.right >= this.width()
});

5. Read the README.md in the zip for more usages.


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