bstar.stickytools v0.0.3

StickyTools

A collection of utility functions used to create sticky elements.

getElementOffset

Returns the current vertical offset of an element, measured in pixels from the top of the document.

getScrollOffset

Returns the current vertical scroll offset, measured in pixels from the top of the document.

Example Usage

import _ from 'lodash';
import { getElementOffset, getScrollOffset } from 'bstar.stickytools';

const stickyElement = document.getElementById('sticky-element');
let stickyElementOffset = getElementOffset(stickyElement);
let windowWidth = window.innerWidth;

const handleScroll = _.debounce(() => {
  const scrollOffset = getScrollOffset();
  if (scrollOffset >= stickyElementOffset) {
    stickyElement.classList.add('sticky');
  } else {
    stickyElement.classList.remove('sticky');
  }
}, 12);

const handleResize = _.debounce(() => {
  // only act on horizontal resize
  if (windowWidth !== window.innerWidth) {
    windowWidth = window.innerWidth;
    stickyElementOffset = getElementOffset(stickyElement);
  }
}, 12);

window.addEventListener('scroll', handleScroll, false);
window.addEventListener('resize', handleResize, false);