Jquery - how to create a sophisticated sidebar that smoothly scrolls down with you

Question

I probably couldn't depict it better in the title (and if it has a term let me know), but just to quell the obscurity, I was referring to something like this. After you wait for the page to load, see how when you scroll down, the social media left bar stays fixed, but then when you scroll just enough that it meets your upper side, it sticks to it as you scroll further.

I wanted to implement something corny and pretentious like that, so does anybody know a tutorial or a method to get that done in jquery? (I can probably do it myself, if I'm not mistaken, just need some sense of direction from savvy jqueryists).

Is there a way to know when and how much a user scrolls? Can it be done with id's like the # url appendix to jump to a specific element? Just some ideas...

Answer 1

Here's a jQuery tutorial on how to create floating menus:

http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/

and a demo:

https://nettuts.s3.amazonaws.com/018_Floating_Menu/demo/dhtml_float_menu_final_nettut.html

Answer 2

@Andy West: Actually, after reviewing it I noticed it wasn't exactly what I was looking for. This is exactly it: link. But thanks for the reference anyway.