This time I will share jQuery Plugin and tutorial about Execute A Function When An Element’s Visibility Changes – jQuery scrollIntoView, hope it will help you in programming stack.
scrollIntoView is a jQuery plugin that listens for the page scroll events and fires a function when an element is scrolled into view or out.
How to use it:
1. Import the jquery.scrollintoview.js script into your webpage, after jQuery JavaScript library.
1 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2 |
<script src="jquery.scrollintoview.js"></script> |
2. In this case, we’re going to change the background colors of the webpage when the element ‘box’ is scrolled into view or out.
03 |
var mount = function () { |
04 |
$('body').css('background-color', 'red') |
06 |
var unmount = function () { |
07 |
$('body').css('background-color', '#fff') |
10 |
$('.box').scrollIntoView(mount, unmount) |
3. Set the once parameter (default: false) to true if you want the function to be triggered only once.
1 |
$('.box').scrollIntoView(mount, unmount, true) |
This awesome jQuery plugin is developed by egoist. For more Advanced Usages, please check the demo page or visit the official website.
