https://github.com/estrattonbailey/overunder
Tiny waypoint library.
https://github.com/estrattonbailey/overunder
emits-events listeners position waypoint-library
Last synced: about 1 year ago
JSON representation
Tiny waypoint library.
- Host: GitHub
- URL: https://github.com/estrattonbailey/overunder
- Owner: estrattonbailey
- Created: 2016-07-03T11:39:05.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2018-11-01T20:32:23.000Z (over 7 years ago)
- Last Synced: 2025-03-15T23:15:44.858Z (over 1 year ago)
- Topics: emits-events, listeners, position, waypoint-library
- Language: JavaScript
- Homepage: https://overunder.now.sh/
- Size: 108 KB
- Stars: 25
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```javascript
import overunder from 'overunder'
const scroller = overunder({
y: 1000
})
scroller.on('y over', () => {
console.log('user scrolled over 1000px')
})
scroller.update()
```
```javascript
import overunder from 'overunder'
const scroller = overunder({
y: document.getElementById('lazyImg')
})
scroller.on('y over', () => {
console.log('#lazyImg is visible')
})
scroller.update()
```
```javascript
import overunder from 'overunder'
const scroller = overunder({
x: 900
})
scroller.on('x under', () => {
console.log('viewport is < 900px wide')
})
scroller.update()
```
```javascript
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()
```
```javascript
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: ` `. 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
```javascript
const listener = scroll.on('y over', () => {})
listener() // destroy listener
```
## API
### update([options])
Checks position and fires applicable listeners.
```javascript
scroller.update()
```
Pass an optional options object to update waypoint values.
```javascript
scroller.update({
x: 1000
})
```
## License
MIT License © [Eric Bailey](https://estrattonbailey.com)