Question

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.com/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?

Answer 1

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 comments 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.