While I was developing Nibbo I wanted to make the sidebar stay visible all the time; as I couldn’t find any existing library that I liked, I decided to develop my own.

The one I tried first was jQuery scroll follow, but I didn’t like that the sidebar actually moved to put itself on the right position; many websites implement this by keeping the CSS positioning as “absolute” (so it follows the scroll) and switching it to “fixed” when the sidebar would be partly hidden, so that it’s location would be static in the screen even if the user keeps scrolling down, so, no flickering or movement of any kind.

The problem with this approach comes when the sidebar is actually taller than the viewport; if it’s kept fixed on the screen, then a part of it will never be visible to the user. There’s a number of solutions for this, but the approach I liked the most was to scroll the sidebar together with the content, and when the bottom of the sidebar is reached, lock it at the bottom; if the user then scrolls up, then scroll the sidebar up together with the content until the top of the sidebar is reached, and then lock it at the top.

I was quite proud of the implementation I made, and I planned to make it available under an open source license, but never found the time… so, I finally took the code, cleaned it up, documented it, added a demo, and uploaded it to GitHub!

Check the demo here.