Jannis
Jannis

Reputation: 17315

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

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

Upvotes: 2

Views: 2281

Answers (2)

pdub23
pdub23

Reputation: 21

I found this answer more helpful when looking for something similar: jQuery Show/Hide Div when Section is in Viewport

Or jump straight to Alison's example here: http://jsfiddle.net/EADDt/

Upvotes: 0

rahul
rahul

Reputation: 187030

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

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

Upvotes: 1

Related Questions