Question

I am trying to write some code for a floating sidebar.
What that means is, when the sidebar offset.top value reaches a certain distance, it turns to positon: fixed.

I have created a jsFiddle with a demo, this is the full screen link: http://jsfiddle.net/peduarte/Qcftp/show

And here is the link with the codes: http://jsfiddle.net/peduarte/Qcftp/

So at the moment, things are working just fine. But I have made the footer really big (on purpose) and now, what I’m trying to do is calculate the offset.bottom. But for my surprise, there is no such thing.

How can I do that?

If you look at the demo you’ll see that the sidebar overlaps the footer.

I need to remove position: fixed when it’s getting close…

Thanks in advance.

Answer 1

If you want the sidebar to stop when it reaches the footer you can check if the current position of the sidebar + the height of the sidebar is greater than the top of the footer:

($("aside").position().top + $("aside").outerHeight() > $("footer").position().top) {
   // handle situation
}