fl_sticky v1.0.4

fl_sticky

position:sticky fallback using animationframe

• Works for both top and bottom positioned elements
• Works inside overflowed containers
• No scroll listeners, nonblocking RAF used instead
• Requires no predefined HTML/CSS structure

Be aware any value on the top/bottom property will be ignored. Use margins to move the element.

Usage

import Sticky from 'fl_sticky'

// syntax
new Sticky(<container query>, <top element query>, <bottom element query>, <optional: class name override>)

// examples
new Sticky('.container', 'header', 'footer')
new Sticky('.container', 'header')
new Sticky('.container', false, 'footer')

// class name override example
new Sticky('.container', 'header', false, {
            stickyTop: 'custom-top',
            stickyBottom: 'custom-bottom',
            stickyReverseTop: 'custom-reverse-top',
            stickyReverseBottom: 'custom-reverse-bottom'
        })

fl_sticky tries to impact performance as little as possible - it does not apply any CSS by itself, it only toggles 4 classes.

This example SCSS will work with the default class names and both positioning variants.

.container {
  position: relative;

  &.sticky {
    &-top {
      header {
        position: fixed;
      }
    }

    &-bottom {
      footer {
        position: fixed;
      }
    }
  }

  .sticky-reverse {
    &-top {
      position: absolute !important;
      top: auto;
      bottom: 0;
    }

    &-bottom {
      position: absolute !important;
      top: 0;
      bottom: auto;
    }
  }
}

header, footer {
  position: absolute;
}

header {
  top: 0;
}

footer {
  bottom: 0;
}