Sections
A tiny 4kb class (with no dependencies) to detect the page section the user is on as well as spy on fixed page elements to run events against based on the page sections (when the element starts to change between a section, the middle and the end of the section).
The library can be used to trigger events on the sections based on the users scroll position as well as trigger events on fixed elements related to the main sections.
Usage:
{
/**
triggered when the section changes.
*/
})
.elementEvent(element, (eventType, direction, currentSection) => {
/**
add element event. Pass in the element and the method gets triggered when the element starts, the middle and the end meets the section's based on the section selector in the constructor. The direction and current section the user is on are provided into the method. This method is chainable.
*/
})">new Sections({selector: '.sections'})
.sectionStarted((section, direction) => {
/**
triggered when the section changes.
*/
})
.elementEvent(element, (eventType, direction, currentSection) => {
/**
add element event. Pass in the element and the method gets triggered when the element starts, the middle and the end meets the section's based on the section selector in the constructor. The direction and current section the user is on are provided into the method. This method is chainable.
*/
})
.sectionStarted((section, direction) => {
/**
triggered when the section changes.
*/
})
.elementEvent(element, (eventType, direction, currentSection) => {
/**
add element event. Pass in the element and the method gets triggered when the element starts, the middle and the end meets the section's based on the section selector in the constructor. The direction and current section the user is on are provided into the method. This method is chainable.
*/
})
Options
You are able to pass options when setting up Sections. These have default values and are optional.
export interface Options {
selector: string
scrollEventBounce: number
resizeEventBounce: number
}
selector: string
scrollEventBounce: number
resizeEventBounce: number
}
sectionStarted
A section and a direction are provided:
interface SectionInterface {
index: number
from: number
to: number
classList: string[]
}
enum Direction {
UP = 'up',
DOWN = 'down'
}
index: number
from: number
to: number
classList: string[]
}
enum Direction {
UP = 'up',
DOWN = 'down'
}
elementEvent
Pass in your fixed element and the method will return the following based on the related position to the sections:
enum EventType {
START = 'start',
MIDDLE = 'middle',
END = 'end'
}
enum Direction {
UP = 'up',
DOWN = 'down'
}
interface SectionInterface {
index: number
from: number
to: number
classList: string[]
}
START = 'start',
MIDDLE = 'middle',
END = 'end'
}
enum Direction {
UP = 'up',
DOWN = 'down'
}
interface SectionInterface {
index: number
from: number
to: number
classList: string[]
}
Yarn / NPM:
yarn add @peter.ingram/sections