jQuery: How can I check if a block in my document is inside the viewport or outside of it?

Question

I am basically trying to trigger a function if the footer is inside the viewport.

How can I check whether the footer is currently visible in the viewport?

I assume I will have to put it into the $(window).scroll() event so that the listener becomes true once the footer becomes visible but what the function should be I just can't figure out.

Any help would be much appreciated.

Thanks for reading,

Jannis

Answer 1

Check if the top of the footer element is greater than the window height. Something like

$("#yourfooterid").position().top > $(window).height()