How can I know if an DOM element is currently on screen using jQuery.

Question

Is there a function, or plugin, that tells me if more than 50% of a <div> block is currently being displayed?

I know there are things like $.offset() but I didn't want to do it by hand every time the user resizes it's window or scroll to a region.

Something on the lines of :visible, but that is currently visible.

Thanks!

Answer 1

If your definition of "visible" is "more than 50% of the div on the screen", you're going to need to create a function of your own to calculate this.

You will need to define exactly what portion of the <div> you are calculating - i.e. margins, borders, elements hidden in scrollTop/scrollLeft, etc...