You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
> A lightweight (2kb gzipped), zero-dependency javascript library for making a sidebar float.
5
+
> A lightweight (2kb gzipped), zero-dependency JavaScript library that makes sidebars float.
5
6
6
7
[Demo](https://js-2sy9en.stackblitz.io)
7
8
8
-
FloatSidebar.js is a vanilla javascript library that can be used to make a sidebar float, so it would automatically stick to the top or bottom of the viewport depending on the scroll direction until the beginning or end of the content is reached.
9
-
10
-
The library supports two strategies which activate depending on the sidebar's height:
9
+
FloatSidebar.js is a lightweight JavaScript library that creates sticky, floating sidebars. It keeps the sidebar visible in the viewport by dynamically sticking it to the top or bottom based on scroll direction and sidebar height.
11
10
12
-
1.When the sidebar's height > the viewport height, the sidebar sticks to the viewport bottom when scrolling down, and to the viewport top when scrolling up _(see the left sidebar on the video)_.
13
-
2.When the sidebar's height < the viewport height, the sidebar sticks to the viewport top _(see the right sidebar on the video)_.
11
+
1.Tall Sidebars (taller than the viewport), scrolls with the content, sticking to the bottom when scrolling down and to the top when scrolling up._(see the left sidebar in the video)_.
12
+
2.Short Sidebars (shorter than the viewport): Stays fixed at the top during scrolling. _(see the right sidebar in the video)_.
0 commit comments