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".
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 basic.html.
Basic example: basic.html
Q: Do I need to require the fixed-sticky library separately?
A:
No you do not, it is bundled together with sass-fixed-sticky.
bower install
npm install
gulp watch
gulp bump
git tag -a 0.1.7 -m "0.1.7"
- https://github.com/filamentgroup/fixed-sticky
- http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
Available under the MIT License.