Switch div from fixed to absolute at bottom of browser

Question

Im trying to add a footer at the bottom of this content that doesn\'t overlay the content but moves it up.

The only way I can see it working would be something like,

Answer 1

You should use jQuery to add a class containing the position:fixed value when the scroll position of the page is less than the inline position of the #work div. Once it scrolls past the position, remove the class and have the element fall back in line.

You can achieve this using the following jQuery methods.. .scrollTop() .offset().top() and $(window).height().

This tutorial will give you an understanding of what you need to do to achieve the necessary results, you will just have to change the calculation slightly using $(window).height(), $('#footer').height() and a few other changes to get what you desire.