Skip to content

A tiny class to detect page sections as user scrolls and triggers events on fixed elements.

Notifications You must be signed in to change notification settings

peteringram0/sections

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

Demo

Usage:

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.
     */
  })

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
}

sectionStarted

A section and a direction are provided:

interface SectionInterface {
  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[]
}

Yarn / NPM:

yarn add @peter.ingram/sections

About

A tiny class to detect page sections as user scrolls and triggers events on fixed elements.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published