jQuery fake collision detection

Question

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.

Denis Ermolin · Accepted Answer · 2012-08-17 10:28:29Z

1

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

answered Aug 17, 2012 at 10:28

Denis Ermolin

5,5766 gold badges29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kyle Over a year ago

Great start! I Think the footer has relative position. But I might be able to change that ;)

Denis Ermolin Over a year ago

Overall idea is to calculate free space between footer's top and document top. And use it here maxScrollTop = heightBetweenFooterAndTop - navHeight;

Kyle Over a year ago

I think it actually will work with position: relative; as well. Thanks very much!

Johni · Accepted Answer · 2012-08-17 10:15:34Z

0

Maybe someting like this could be a starting point: http://ryanfait.com/sticky-footer/ It's just html and css.

answered Aug 17, 2012 at 10:15

Johni

2,9804 gold badges30 silver badges48 bronze badges

1 Comment

Kyle Over a year ago

Yeah, that's a great solution but unfortunately I can't edit too much of the site's layout. :(

Collectives™ on Stack Overflow

jQuery fake collision detection

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related