Checking element visibility in jQuery

Question

What is the best way to determine if an item is actually displayed on the page? How do they change in pixels, because the element is not hidden through CSS, but is in the visible part of the scrollable area (window or some kind of overflowing block element)?

I assume that I need to check .is (': hidden') first against the element and its parents. Then I would need to iterate over all the parents and the window, checking the scroll overflow / auto / hidden, then compare the position and scroll size of the parent element with the original position and size of the element. And I will also need to check the absolute positioning and look at the z-indices.

Is there an easier way?

Answer 1

There is a plugin. jQuery inview event plugin

Answer 2

I have implemented $. inside a plugin in which you can specify ancestor , in your case:

 $('html').css('height', '100%'); // make `html` the height of the viewport $('#your-element').inside('html'); // compare `#your-element` to `html` 

will return for example:

 { left: 0.2, // your element is "x-inside" (because >0 and <1) top: -2.3 // but is not "y-inside" (because <0) } 

Read more in README.

In your case, you can add an extra check for is(':hidden') and z-index

Hope this helps.