Search code examples
jqueryhtmlcollision-detection

jQuery fake collision detection

Ok so I have an odd situation.

On a site I have been asked to add the functionality that the footer should never overlap the side nav. Sometimes this happens on smaller resolutions (but not so small as to change the media query.)

So I tried jQuery element collision detection, but that seem impossible on fixed position elements. So now I'm thinking that there might be a way to get the document height, footer height and nav height. Detect where I am in the document with .scroll() (or .scrollTo(), I am not sure) and when the top of the footer reaches the bottom of the nav, change the nav's position.

But now I am stuck on how to actually code this :D

So how can I get jQuery to compare the heights and calculate where I am in the document based on this?

Worth noting that unfortunately I can't edit too much of the site's layout.

Here's my fiddle.

And here's the live site (if you change the resolution and scroll down you can see the overlap.)

Thanks.

Solution

  • Here you are! Working script Very simple. But this idea works only if footer has absolute position and menu is fixed.