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 - ie margins, borders, elements hidden in scrollTop / scrollLeft , etc...

Answer 2

Somewhat late to this party, but there is indeed a JQuery plug-in for this:

The Is On Screen plug-in can be downloaded from here: http://plugins.jquery.com/node/16506/release and there is also a demo page

Hope that helps.