v-appear

jQuery.appear

This lightweight (885B, gzipped) jQuery plugin generates custom events that notify when an element becomes visible or hides after a scroll.

This is a extension of the original jquery.appear plugin by Andrey Sidorov, @morr, (https://github.com/morr/jquery.appear). While the old jQuery.appear does a good job of tracking scrolling on the document, this version of jQuery.appear will allow you to provide an optional container in which items should be visible in.

When an element becomes visible or not in it's container (the container can either be an elemnt with scrolling or the document) jQuery.appear triggers appear/disappear events on the observed elements.

Install

npm install --save v-appear

Import the v-appear.js from it's dist folder in a script tag, or require the plugin as a module before you intend to use it.

Usage

$('.selector').appear(options); // See options, below  
 
$('.selector').on('appear', function(event, $allAppearedElements) {
  // this element is now visible in the viewport and in it's parent container (if provided)
});
$('.selector').on('disappear', function(event, $allDisappearedElements) {
  // this element is now not visible in the viewport or in it's parent container (if provided)
});

The appear/disappear custom filter can be used to check if an element is(n't) visisble.

$('.selector').is(':appeared')

Options

Name	Type	Description
container	{Selector/Element/jQuery Object}	Default: document. The parent for the element being observed. jQuery.appear will check whether the element is(n't) visible in the viewport and in the container.
forceProcess	{Boolean}	Default: false. Immediately check if the element is(n't) visible and fire appear/disappear events accordingly.
vOffset	{Double}	Default: 0. Number of pixels from the viewport vertical edge the element can be found before triggering the appear event
hOffset	{Double}	Default: 0. Number of pixels from the viewport horizontal edge the element can be found before triggering the appear event

---

Known issues

There are rare situations where the document position of an <iframe> does not match the iframe position or size (for example, this if common inside a CodePen iframed sandbox). If the plugin is run in an <iframe> with this issue, then the script will not work reliably, since it expects the document position and size to reflect what is actualy viewed as the iframe viewport.