scroll-master

A package to help fix items in a scroll container

Usage no npm install needed!

<script type="module">
  import scrollMaster from 'https://cdn.skypack.dev/scroll-master';
</script>

README

Welcome to Scroll Master 👋

Version Documentation Maintenance License: MIT

Demo

Website: https://scrollmaster.robbie.digital

Code: https://github.com/Robbie-Cook/scroll-master/tree/master/packages/test

Install

npm i scroll-master

A better position: sticky

N.B. Forked from https://github.com/rgalus/sticky-js.

ES6 / CommonJS

import ScrollMaster from "scroll-master";

or

const { default: ScrollMaster } = require("scroll-master");

then, you can call scroll master to keep your item in view

new ScrollMaster('.selector');

HTML

<script src="https://unpkg.com/scroll-master@latest/dist/index.js">

then

<script>
ScrollMaster.default('selector');
</script>

Options

Option Type Default Description
data-sticky-wrap boolean false When it's true sticky element is wrapped in <span></span> which has sticky element dimensions. Prevents content from "jumping".
data-margin-top number 0 Margin between page and sticky element when scrolled
data-sticky-for number 0 Breakpoint which when is bigger than viewport width, sticky is activated and when is smaller, then sticky is destroyed
data-sticky-class string "stuck" Class added to sticky element when it is stuck
data-custom-styles boolean false Whether to remove default styles for sticky element (and only apply classname)

Author

👤 Robbie Cook robbie@robbie.pw

🤝 Contributing

Contributions, issues and feature requests are welcome!

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2020 Robbie Cook robbie@robbie.pw.
This project is MIT licensed.

This project was forked from sticky-js

This README was generated with ❤️ by readme-md-generator