jQuery Plugin To Detect If Elements Are In View Viewport Detector - Download jQuery Plugin To Detect If Elements Are In View - Viewport Detector

Download jQuery Plugin To Detect If Elements Are In View – Viewport Detector

By Posted on

This time I will share jQuery Plugin and tutorial about jQuery Plugin To Detect If Elements Are In View – Viewport Detector, hope it will help you in programming stack.

jQuery Plugin To Detect If Elements Are In View Viewport Detector - Download jQuery Plugin To Detect If Elements Are In View - Viewport Detector
File Size: 4.53 KB
Views Total: 618
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

A simple jQuery based viewport detect which performs a callback and alters the CSS classes if a specified elements is scrolled into view.

How to use it:

1. Load the jquery-viewport-detector.js script after jQuery JavaScript library.

view source
1 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
2 <script src="jquery-viewport-detector.js"></script>

2. Execute a callback if the #el element is visible on your page.

view source
1 $('#el').viewportDetector({
2   callback: {
3     // do something
4   }
5 });

3. Change the CSS styles of the #el element if it is scrolled into view.

view source
1 #el.active-card {
2   background: #00B200;
3 }

4. Full plugin options.

view source
01 // jQuery selector
02 selector: 'li',
03  
04 // sensitivity
05 sensitivity: 0.2,
06  
07 // CSS class added to the active element
08 activeClass: 'active-card',
09  
10 // callback
11 callback: {
12   cardChange: null
13 }

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

source : jqueryscript.net

Related posts: