Bi-directionally scrolling sticky sidebar in pure JavaScript for use in any project
A short JavaScript code that allows you to quickly and easily implement a Sticky Sidebar, if the browser's viewport is too short, sidebar's contents will scroll in the direction the user scrolls and sticks to either top or bottom of the screen when there's no more content. And everything with the use of pure JavaScript, thanks to which you we'll save redundant code and gain efficiency.
I wrote code to use in my own project. All ready-made solutions used jQuery or had a lot of unnecessary code. I share it because it may be useful to someone. I allow it to be freely modified. Perhaps I will extend the script in the future.
you can read more about the project in my article (in Polish): Two Direction Sticky Sidebar – JavaScript - Antosik.dev
This is the use of this script you must add attribute: data-sticky ="true" to your Sidebar.
If you want to optionally set gaps over or under the Sidebar you can use additional attributes:data-top-gap="20" data-bottom-gap="20".
You can also add the data-mobile-width attribute to Sidebar. If you set it, for example: data-mobile-width="768" the script will stop working when the screen is smaller than 768px. This allows for greater control over the responsiveness of the page.
P.S. Only one element can be used so far
<aside data-sticky="true" data-top-gap="20" data-bottom-gap="20" data-mobile-width="768">
You can view the full changelog here.
- [1.7] - 2024-11-22
- Added mobile optimization for sticky behavior.
- Fixed style persistence issues on mobile.
- Introduced detailed inline comments.
Follow this GitHub archive link or run in the terminal:
$ git clone https://github.com/Antosik-dev/Two-direction-Sticky-Sidebar.git
If you found a bug or would like to contribute to the development, please contact me: [email protected] or use contact form on my website: antosik.dev