Sass-fixed-sticky NPM

sass-fixed-sicky

Easy "sticky position" elements. These are elements that are positioned normally until you scroll past the top boundary of the element, then it becomes "fixed position".

npm.io

Installation

bower install sass-fixed-sicky or npm install sass-fixed-sicky

In your .scss (or .sass) file:

@import "sass-fixed-sticky";

#fixed-element {
  @include position(sticky);
  top: 0;
}

top should be equivalent to how far from the top you want the element to be. You can also use the bottom property.

And then include the JS file: dist/sass-fixed-sticky.js

<script src="sass-fixed-sticky/dist/sass-fixed-sticky.js"></script>

Then you're done, all the elements you applied the mixin to will have a 'sticky' position. You don't even need to add any Javascript in your <head>.

For a complete example see #demos.