jQuery Plugin For Detecting Elements In The Viewport - Visible.js

Visible.js is a really small (~1kb minified) jQuery plugin that detects if an element is visible or invisible in the browser as you scroll down or up the web page. Supports both horizontal and vertical scroll positions.

Installation:

# NPM
$ npm install jquery-visible --save

# Bower
$ bower install jquery-visible --save

Basic usage:

1. Just insert the JavaScript file jquery.visible.js after jQuery library and you're ready to go.

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

2. Call the plugin on the target element to detect if it is visible on the screen. This will return True if the element is visible within the viewport.

$('#myElement').visible();

3. Check if any part of the element is scrolled into view.

$('#element').visible( true );

4. Check if the element is visible and is within the viewport.

$('#element').visible( false, true );

5. If you want to only accounts for vertical position or horizontal position.

// Check both vertical, and horizontal
$('#myElement').visible(true, false, 'both');

// Check only horizontal
$('#myElement').visible(true, false, 'horizontal');

// Check only vertical
$('#myElement').visible(true, false, 'vertical');

---

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