jQuery Plugin To Check Whether An Element Is Within The Viewport - whenInView

Just another jQuery scroll position checker plugin that allows for adding (removing) CSS classes and executing useful callbacks when a specified DOM element scrolled into or out of view.

How to use it:

1. Import jQuery library and the jQuery whenInView plugin's script into the webpage.

<script src="://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="jquery.wheninview.min.js"></script>

2. Initialize the plugin and we're ready to go.

$('.element-to-track').whenInView();

3. By default, the plugin auto add the CSS class 'element-in-view' to the target element. In this case, we're going to animate the element using the familiar Animate.css.

$('.element-to-track').whenInView({

  // requires Animate.css
  className: 'animated infinite flipInY'
  
});

4. Useful callback functions which will be fired when the element is scrolled in and out of view.

$('.element-to-track').whenInView({

  elementIn: function(){
    // do something
  },

  elementOut: function(){
    // do something
  },

  // remove the class when the element is out of view?
  removeWhenOut: false

});

5. Specify the parent container in which you want to track the scroll events.

$('.element-to-track').whenInView({

  container: window

});

6. Set the top and bottom offsets.

$('.box').whenInView({

  topOffset: 0,
  bottomOffset: 0,

});

7. Determine whether or not to wrap the master scroll event in a requestAnimationFrame.

$('.element-to-track').whenInView({

  RAF: true

});

8. Set the interval in milliseconds for staggered animations.

$('.element-to-track').whenInView({

  staggerInterval: 250

});

9. Check the element is in view on scroll or right now.

$('.element-to-track').whenInView({

  fireAtStart: true

});

Change logs:

2017-08-03

• Fixed removeWhenOut bug

2017-03-08

• Aded "fireAtStart" option

2017-03-02

• Fixed a bug that fired all callbacks at once

2017-02-22

• JS update

---

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