#sidebar position:fixed at certain scrolling

Question

Please look at this: http://i.stack.imgur.com/gDFpq.png

My aim is to have the sidebar as it is in the diagram but once it reaches the top of the window (when the user scrolls down), it changes to position:fixed and changes margin-top:0 . I've looked at a tutorial online to this and learned that position:absolute may be useful but I have honestly no clue how to do this so any help would be useful. If you need a bit more detail on what I mean because you don't understand that please do ask :)

Any help would be appreciated.

Answer 1

To detect when it reaches the top of the window, you can use the window.scroll event.

Here's a nice tutorial that teaches you exactly what you want to do: http://css-tricks.com/scrollfollow-sidebar/

Answer 2

Your sidebar will have a variable height until the logo is scrolled out of sight. Instead of using position:absolute , keep it at position:fixed , check the remaining height of the logo and extract this from the sidebar 's height.

Here's a fiddle: http://jsfiddle.net/2afv13z3/

When keeping the sidebar at bottom:0; and top property based on the window scroll position, you'll always have it at 100% under your logo .