Test if element can be seen by the user on an html page

Question

Is there any way to know if an element is visible on an html page?

Like this:

One can probably do it considering the horizontal/vertical scrolling positions, the width/height of the browser window and the position/size of the element on the page, but I have little experience in jQuery so I don't know how to do it. And there might be a simple function one can call, I don't know.

Answer 1

You can use the .is(':visible') selectors to check if an element is currently visible in the DOM.

Edit:

However, as @BenM mentioned, this doesn't check if the elements on your page are actually out of your scrollable range - a great little plugin you could use in that case would be Viewport Selectors for jQuery.