I am trying to make a sidebar div sit below a header secion, when you scroll down, it will turn into a fixed div and stay fixed until the bottom of the page, once it reaches a footer section, it will stick to the top of it and allow me to scroll down the footer area without seeing it anymore.

There is a perfect emaxple of what I am trying to describe on this site

In the left column, it sticks as you scroll down and then un-sticks at the bottom

I am looking for a good way to do this, hopefully an example or tutorial, I realize it is done with javascript changing the divs properties. I have tried searching but all I could find was old outdated articles over 5-6 years old and they only did half the job. I am not sure even what to call this feature?

I am trying to make a sidebar div sit below a header secion, when you scroll down, it will turn into a fixed div and stay fixed until the bottom of the page, once it reaches a footer section, it will stick to the top of it and allow me to scroll down the footer area without seeing it anymore.

There is a perfect emaxple of what I am trying to describe on this site http://madebymany./blog/apples-aesthetic-dichotomy

In the left column, it sticks as you scroll down and then un-sticks at the bottom

I am looking for a good way to do this, hopefully an example or tutorial, I realize it is done with javascript changing the divs properties. I have tried searching but all I could find was old outdated articles over 5-6 years old and they only did half the job. I am not sure even what to call this feature?

• javascript
• css

Share Improve this question Follow asked Oct 31, 2011 at 16:54 JasonDavisJasonDavis 49k107107 gold badges326326 silver badges559559 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

That web site is using jQuery Scroll Follow.

Note that according to the jQuery Scoll Follow web site...

The Scroll Follow object will remain inside its immediate container.

... hence why the scrolling stops before the ments on your example web site; the element which is scrolling on the page is constrained inside of its parent <aside> element. You can check out the example.

You basically handle the page's scroll event and move the box around.

Most tutorials require jQuery, so get familiar with it. If you want a tutorial, here's a working one: http://designwoop./2011/01/how-to-create-a-jquery-sticky-sidebar/.

Why not dissect the code of that website too?