jQuery Filters To Detect If An Elements Is Out Of View - Offscreen

The jQuery Offscreen library provides a set of filters to determine if any part of your element is out of view (is invisible on the screen).

See also:

• jQuery Plugin For Checking If An Element Is In The Viewport - isInViewport

How to use it:

1. The plugin requires the latest version of jQuery library to work correctly.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.offscreen.js"></script>

2. The JavaScript to detect the off-screen events and do some cool stuffs when you scroll down the webpage.

$(window).scroll(function(){
  var demo = $('h1');
  if( demo.is(':off-screen') ) {
    alert("Off Screen");
  }
})

3. All available filters.

// top of the viewport
$('#element').is(':off-top')    

// right-side of the viewport
$('#element').is(':off-right')  

// bottom of the viewport
$('#element').is(':off-bottom') 

// left-side of the viewport
$('#element').is(':off-left')   

// any side of the viewport
$('#element').is(':off-screen') 

---

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