https://github.com/anthonyshort/waypoints

Trigger methods when scrolling up and down the page
https://github.com/anthonyshort/waypoints

Last synced: 24 days ago
JSON representation

Trigger methods when scrolling up and down the page

• Host: GitHub
• URL: https://github.com/anthonyshort/waypoints
• Owner: anthonyshort
• Created: 2013-01-24T08:16:25.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2013-09-08T03:23:26.000Z (about 11 years ago)
• Last Synced: 2024-04-15T03:16:22.818Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 156 KB
• Stars: 18
• Watchers: 2
• Forks: 8
• Open Issues: 1
• Metadata Files:
  • Readme: Readme.md
  • Changelog: History.md

Awesome Lists containing this project

README

        
# Waypoints

  Fire methods when points on the page are scrolled to for the first time. Useful for triggering animation to elements while scrolling down the page.

## Installation

    $ component install anthonyshort/waypoints

## Data API

Easiest way to use it is to use the create method. This assumes you want to add/remove classes and uses data attributes on the elements. This is the main purpose for this component but you can also use the standard API to do something different.

Waypoints.create({ 

  selector: '.js-waypoint',

  addClass: 'is-visible',

  removeClass: 'is-hidden',

  delay: 500,

  offset: -200

});



### Options

You pass through a set of options to `Waypoint.create` to set default properties for the waypoints which can be overriden by each waypoint using data attributes.

#### `selector`

The selector to match to find waypoints. This element will be used as the point to trigger the events. Defaults to `.js-waypoint`.

#### `addClass`

Default class to add when an element is reached. This can be overriden by each waypoint using the data attribute `data-waypoint-addClass`. Defaults to `null`.

#### `removeClass`

Default class to add when an element is reached. This can be overriden by each waypoint using the data attribute `data-waypoint-removeClass`. Defaults to `null`.

#### `delay`

A delay, in milliseconds, for adding or removing the classes. Defaults to `0`. Can be overriden using `data-waypoint-delay`.

#### `offset`

Normally waypoints will use the scrollTop position of the element. You can adjust the point using this attribute to make it trigger earlier or later. This can be overriden using the data attribute `data-waypoint-offset`. Defaults to `0`.

## Standard API

You can also use Waypoints to call methods at points on the page. This allows you to do things other than just add/remove classes from an element when scrolling to it.

    var waypoints = new Waypoints();

    waypoints.addPoint(100, {

      foo: "bar"

    });

    waypoints.on('point', function(point, data){

      console.log('Point reached');

    });

The `addPoint` method takes two arguments - a scroll point and data that will be sent through to the event when the point is reached.

## License

  MIT