Advanced Is In View Plugin - jQuery inView.js

A small jQuery is in view plugin which determines the element visibility and executes certain functions when the element is scrolled in or out of the viewport.

The most prominent feature of this plugin is to provide a useful isSeen parameter which allows you to determine whether the element has appeared before. So you can trigger the inView function only when this element first appears.

How to use it:

1. Insert the JavaScript file inView.jquery.js after loading the latest jQuery library (slim build).

<script src="/path/to/cdn/jquery-VERSION.slim.min.js"></script>
<script src="inView.jquery.js"></script>

2. Create an element you'd like to keep track of the visibility.

<div class="box">
  Element To Track
</div>

3. Trigger a function when the element is scrolled into view.

$('.box').inView({
  in: function() {
    // do something
  }
})

4. Trigger a function when the element is scrolled out of the viewport.

$('.box').inView({
  out: function() {
    // do something
  }
})

5. Trigger only once using the isSeen parameter.

$('.box').inView({
  in: function(isSeen) {
    // if not seen before
    if (!isSeen) {
        alert('not seen before');
    }
  }
})

6. Control the trigger point in pixels. Default: 0.

$('.box').inView({
  in: function(isSeen) {
    // if not seen before
    if (!isSeen) {
        alert('not seen before');
    }
  },
  threshold: 50
})

---

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