estrattonbailey / overunder

Tiny waypoint library.

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