overunder

Tiny waypoint library. 750 bytes gzipped.

Features

Supports both x and y axis
Accepts both integer values and DOM nodes
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
})

estrattonbailey/overunder