How can I determine if the DOM object is outside the window using JavaScript?

Question

I am looking for a way to know if an object (like Div, img, etc.) will be displayed and displayed by the user in a JavaScript / jQuery window.

When I say “displayed and visible”, this means that the user does not scroll the page enough to make the object visible (if you know what I mean). But if the user scrolls the page and the div is no longer displayed (exits the window), then the function I'm looking for should be aware of this.

Answer 1

You should use the viewport selector for jQuery to check if this item is displayed in the actual viewport.

Here's a demo to show what I mean.