React when elements are in view.

$ bower i jquery-beacons
$ npm i jquery-beacons

Creating a new beacon

Beacons are page elements you want to act on when they scroll into view.

$('.widget').beacon({
    onenter: function (el) {
        alert('Widget ' + el.id + ' is on screen!');
    }
});

Beacon options

$('.widget').beacon({
    enteronce: true,
    onenter: function () {
        alert('A widget is visible!');
    }
});

{function(HTMLElement)} [onenter]

Event when beacon enters the viewport.

{boolean} [opts.enteronce=false]

True to trip onenter event only once.

{function(HTMLElement)} [onexit]

Event when beacon leaves the viewport.

{boolean} [opts.exitonce=false]

True to trip onexit event only once.

{number} [opts.range=0]

Pixels from top and bottom of viewport to trigger this beacon.

Beacon actions

$(.widget).beacon('enable');
$(.widget).beacon('disable');
$(.widget).beacon('destroy');

• See: http://plugins.jquery.com/beacons
• See: http://github.com/cobbdb/jquery-beacons
• License: MIT