Stickify

Yet another sticky scroll lib.

Keeps elements 'stuck'/'fixed' in place until the user has scrolled past the end of another 'container' element. It has no dependencies.

(the container element doesn't have to be the fixed elements' parent or ancestor!)

Example usage

In the browser:

// <script src="stickify.min.js"></script>
// …

var container = document.getElementById('sticky-container')
var els = document.querySelectorAll('.sticky')

stickify({ container: container, els: els })

As an imported module:

import stickify from 'stickify'

const container = document.getElementById('sticky-container')
const els = document.querySelectorAll('.sticky')

stickify({ container, els })

API

Stickify exports a function that takes an options object as a parameter. In the browser, window.stickify is set.

Here are its defaults:

stickify({
  container:   undefined, // element (required)

  top:         undefined, // you can use 'top' and 'bottom' elements to mark the
  bottom:      undefined, // start and end of the 'sticky zone' instead

  els:         undefined, // NodeList or array of elements to stick (required)

  minWidth:    0,         // don't stick when window.innerWidth < minWidth
  usePosition: false,     // use css positioning rather than transforms
  quiet:       false,     // suppress console output
})

Notes

• stickify() will throw if container or els aren't present.
• CSS transforms are normally used to keep elements fixed. usePosition will use top to do this instead, but it's up to you whether to set position: relative or absolute on stuck elements.

Todo

• Better test html
• Events
• Quiet by default
• Debugging option for lots of console output

Licence

MIT

Copyright (c) 2017 Douglas Thompson

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.