User Interface

Utility

[ Waypoint ]

What is it?

Akyral-waypoint allows you to use an element as marker to trigger javascript functionality. When an akyral-waypoint reaches the top of the page, it will trigger events denoting the direction in which it was crossed to.

A data attribute may also be defined allowing data to be passed along with the events.

How it works

Any waypoint that is added to the dom is collected for calculation. On scroll, all waypoint positions are evaluated to determine whether a akyral-waypoint-above or akyral-waypoint-below event should be triggered. Crossing through a waypoint will alway trigger the akyral-waypoint-crossed event.

Waypoint #1

This section will trigger when the waypoint reaches the top of the page. The last event triggered for this waypoint was none.

Waypoint #2

This section will trigger when the waypoint is with 100px of the top of the page. The last event triggered for this waypoint was none.

Install

If you haven't used Polymer before you can checkout out the Getting the Code and Using the Elements guides for a quick introduction to Polymer.

Once your all setup with Polymer, you can install it directly into your project with Bower.

$ bower install akyral-waypoint --save