A React sticky component that can stick to top when scrolling up and can stick to bottom when scrolling down.
If you like the project, don't forget to give a star.
If you have any issues, post them on Github.
Github | https://github.com/doanhtu07/StickySideBar
Thank you!
Demo.mov
https://codesandbox.io/s/test-sticky-n-scroll-qr1p3
npm install sticky-n-scroll
or
yarn add sticky-n-scroll
import StickySideBar from "sticky-n-scroll"
...
class Demo extends React.Components {
render()
{
return (
<StickySideBar topSpace={20} bottomSpace{20}>
<div>
Your content
</div>
</StickySideBar>
)
}
}
export default Demo;
Now you can freely manipulate StickySideBar with StickySideBar_ID: imported { StickySideBar_ID } from "sticky-n-scroll"
There are 3 main parts of StickySideBar: Parent, Space, Content. These 3 parts are all div with id equals to corresponding StickySideBar_ID values. You can either use jQuery or any DOM manipulations (such as ResizeObserver, etc.) to get to these elements by ids.
In order for StickySideBar to be able to scroll, Parent should have larger height than Content.
Props | Type | Description |
---|---|---|
topSpace | number | (in pixels) Determine how much space between the content's top and screen's top when scrolling up. |
bottomSpace | number | (in pixels) Determine how much space between the content's bottom and screen's bottom when scrolling down. |
turnOff (optional) | boolean | Turn off sticky mode -> Become a normal div |
initialSpaceDivHeight (optional) | number | Force initial height of space div when StickySideBar mounts |