What is the best way to determine if an element is truly visible on the page? As in pixels are being changed both because the element is not hidden via CSS and is in the visible part of a scrollable area (the window or some overflowing block element)?
I imagine I'll need to first check .is(':hidden') against the element and its parents. I would then need to iterate through all parents and the window, checking for overflow scroll/auto/hidden, then compare that parent element's scroll position and size against the original element's position and size. And I would also need to check for absolute positioning and look at z-indexes, as well.
Is there an easier way?