Beacons

React when elements are in view.

View the Project on GitHub cobbdb/jquery-beacons

Beacons

License Bower version NPM version Dependencies

React when elements are in view.

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

Loading the plugin

Using Browserify

var $ = require('jquery');
require('jquery-beacons');
$('.widget').beacon({..});

As a JS global

<script src="path/to/jquery.js"></script>
<script src="path/to/jquery-beacons.min.js"></script>
<script>
    $('.widget').beacon({..});
</script>

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} [enteronce=false]

True to trip onenter event only once.

{function(HTMLElement)} [onexit]

Event when beacon leaves the viewport.

{boolean} [exitonce=false]

True to trip onexit event only once.

{number} [range=0]

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

Beacon actions

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