this code is adapted from http://jqueryfordesigners.com/fixed-floating-elements/. Without that, i'd still be staring at x,y coordinate values and pulling out my hair.
it creates a floating sidebar that switches from absolute to fixed once you scroll past a certain point on the top of the page. THEN, if you pass another point at the bottom of the page, it starts to adjust the height of the sidebar so that it looks like it's fixed to the bottom of your content frame. it's certainly not perfect, but works pretty well.
the HAML:
the SASS:
the JS:
the key in the JS is that once the sidebar is fixed, if the scrollBottom (which is calculated in the JS) passes the point where you want start adjusting the height of the sidebar, you then have to figure out how tall the sidebar should be. the way it's done here is to figure out how much of the content area has been hidden by the scroll and then use that to calculate the remainder of that content area that's still showing on the page. that remainder is the new height of your sidebar.
if you want to get fancy, you could have a minimum height of the sidebar and if the remainder showing is less than that height, you could adjust the top of the sidebar to appear like it's finally scrolling up off the page (instead of having the sidebar content are keep shrinking). the problem with this is that the scroll doesnt give exact numbers so the position tends to jump a and it's a little to noticeable to be worth it.