ScrollToStick.js
Using the javascript function directly is your best way to make use of this library. The layout for this kind of feature is important. Normally you should have a layout like below-
Take a note on how we have attached an id to header-wrap element.
This is important. As the javascript function applyScrollToStick either
takes an element or id of an element.
The second param of the function is offset. Determines how much the header-wrap
should move back and forth when you do scrolling. In the given layout, we want it to
move back and forth the by the amount of height header is occupying. So, we
can do-
To install-
$ npm install scroll-to-stick
Then you can either import the function in your code-
import {applyScrollToStick} from 'scroll-to-stick';
Or simply add the file as script tag-
<script src="scroll-to-stick/dist/scorll.to.stick.js"><script>
If you want to use it in your react project, you can simply import the react
component ScrollToStick-
import {ScrollToStick} from 'scroll-to-stick';
Then use it the way it's shown in sample code on the right.
The function can take a listener function, which may expect to receive
a status. Either of normal or stuck-top.
Using the status you may decide to add your custom classes or change some behaviour or apply some animation - you name it. This is the best way to control what happens when the scroll to stick component is in normal state or in stuck on top. The code snippet on right is used in the demo above 👉
If you find this work interesting or useful and going to use it soon or using it now, please consider sharing the love by hitting a star on the repo!
Cause you know- 😍 love will keep us alive!
Made with 🧡 and ☕