How does one prevent a fixed element from scrolling over or under another element?

Question

Despite my searches on Google and this site, I haven't been able to find an exact solution to my particular problem.

I have a page with a fixed header and a fixed navigation div which is located in the main content along the right side. When the page is scrolled to the bottom, the footer scrolls right on top of the nav div. You can see what i mean here:

http://codepen.io/anon/pen/gAjcr
(The links list is elongated for dramatic effect to clearly illustrate my issue)

Is there a way using CSS, or by adding some additional elements, that I can prevent this from happening? I've tried adjusting margins and padding and what not, to no avail. The only method that I can think of that might work would be to use some javascript to calculate page offset and footer height, etc, and make the nav div absolutely positioned when it gets towards the bottom, but it seems to be like it might be overkill.

The behaviour I am looking for is when the footer starts to come up the page, it "pushes" the nav div up instead of just laying on top (or underneath) it.

Thanks in advance!

Answer 1

Check this fiddle

JQuery

var r=$('#hello').offset().top;
$(window).scroll(function() {
var s=r - $(window).scrollTop();
if(s <= $('#header').height()) {
    $('#header').css({'position':'absolute'});
}
else{
    $('#header').css({'position':'fixed'});
}
});

Updated fiddle with footer pushing header effect

---

To push the nav above instead of header same JQuery can be used with replacement of the nav id instead of header

See this fiddle / Watch Fullscreen