Skip to content

estrattonbailey/overunder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

84 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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