Skip to content
Tiny waypoint library.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
README.md
index.js
package-lock.json
package.json

README.md

overunder

Tiny waypoint library. 750 bytes gzipped.

Features

  1. Supports both x and y axis
  2. Accepts both integer values and DOM nodes
  3. Only one scroll and one resize listener

Usage

import overunder from 'overunder'

const scroller = overunder({
  y: 1000
})

scroller.on('y over', () => {
  console.log('user scrolled over 1000px')
})

scroller.update()
import overunder from 'overunder'

const scroller = overunder({
  y: document.getElementById('lazyImg')
})

scroller.on('y over', () => {
  console.log('#lazyImg is visible')
})

scroller.update()
import overunder from 'overunder'

const scroller = overunder({
  x: 900
})

scroller.on('x under', () => {
  console.log('viewport is < 900px wide')
})

scroller.update()
import overunder from 'overunder'

const scroller = overunder({
  x: 900,
  x2: 1200
})

scroller.on('x between', () => {
  console.log('viewport is between 900px and 1200px wide')
})

scroller.update()
import overunder from 'overunder'

const scroller = overunder({
  x: 900,
  y: document.getElementById('hideNavTrigger')
})

scroller.on('x under', () => {
  scroller.update({
    y: document.getElementById('hideNavTrigger2')
  })
})
scroller.on('x over', () => {
  scroller.update({
    y: document.getElementById('hideNavTrigger')
  })
})

scroller.update()

Events

overunder emits events depending on what waypoints you pass to it. They follow the same pattern: <axis> <position>. Given an x and y value, overunder will emit the following events.

  • x over
  • x under
  • y over
  • y under

Pass a second value for each and overunder will emit between event:

  • x between
  • y between

Subscribing to events

const listener = scroll.on('y over', () => {})

listener() // destroy listener

API

update([options])

Checks position and fires applicable listeners.

scroller.update()

Pass an optional options object to update waypoint values.

scroller.update({
  x: 1000
})

License

MIT License © Eric Bailey

You can’t perform that action at this time.