Execute A Function When An Element's Visibility Changes - jQuery scrollIntoView

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.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<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.

$(function () {

  var mount = function () {
    $('body').css('background-color', 'red')
  }
  var unmount = function () {
    $('body').css('background-color', '#fff')
  }

  $('.box').scrollIntoView(mount, unmount)

})

3. Set the once parameter (default: false) to true if you want the function to be triggered only once.

$('.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.