Sidebar that follows scroll, but scrolls self, if taller than viewport

Question

(Hey, first post from a longtime lurker :)

I've built a simple sidebar that does the 'absolute-to-fixed' trick to stay on screen, but would like to take in account scenarios, where the sidebar is higher than the viewport.

So I came up with this idea. It all starts as in above:

• On page load, the sidebar is drawn at starting location, some distance from viewport top.
• When the user scrolls the page, the sidebar moves with the content
• If sidebar fits the viewport vertically, it fixes to the top

But here it gets more dynamic:

• If sidebar is taller than the viewport, it continues to scroll with the content until the bottom of the sidebar is reached, and it fixes there. The top of the sidebar scrolls beyond top of viewport.

• When the user scrolls back towards page top, the sidebar moves with the content until the top of the sidebar is reached, and it fixes there. The bottom of the sidebar scrolls beyond the bottom of the viewport.

This way the sidebar reacts to scrolling as usual, while sticking around close enough to find on long pages.

Any pointers to examples, or jQuery- friendly code snippets/guidelines would be much appreciated.

Answer 1

I had this exact idea for a project, here's a example of how to implement it

http://jsfiddle.net/ryanmaxwell/25QaE/

Answer 2

The behaviour you would like to achieve is called 'affix'. Twitter's Bootstrap front-end framework has a javascript component that can do what you would like to get. Please check the section about the affix component. In fact, there you can also see a demonstration of the desired behaviour, the menu in the left sidebar is affixed.

You can define functions for the offset parameter of the affix init call, so it can be dynamically determined when to pin/unpin the element. To see an example in context, check the source of the above linked page, specifically look for application.js, it contains the setup of the affix that you can see on the left side. Here you can see the init code taken out of context:

// side bar $('.bs-docs-sidenav').affix({   offset: {     top: function () { return $window.width() <= 980 ? 290 : 210 }   , bottom: 270   } }) 

It is probably also worth to check in the page sources the docs.css stylesheet, which contains some positioning and styling for the affixed element. Checking this might solve your problem, or at least could give you and idea.