Check if the DOM node is visible in the viewport

gistfile1.js

function elementInViewport(el) {
  var rect = el.getBoundingClientRect()
  return rect.top < (window.innerHeight || document.body.clientHeight) && rect.left < (window.innerWidth || document.body.clientWidth);
}
// and then you can use it:
alert(elementInViewport(document.getElementById('inner')));
// or
alert(elementInViewport($('#inner')[0]));​
`

This is the code I use:

return (
    (boundingRect.top >= 0 ||
        boundingRect.bottom <= window.innerHeight) &&
    (boundingRect.left >= 0 ||
        boundingRect.right <= window.innerWidth)
);

Try this:

return rect.bottom > 0 &&
        rect.right > 0 &&
        rect.left < (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ &&
        rect.top < (window.innerHeight || document.documentElement.clientHeight) /*or $(window).height() */;

Both previous solutions have the algebra wrong. Think about it, the top of an element can be above the top of viewport, but if the bottom of the element is showing (i.e. is below the top of the viewport), then it is still visible. Likewise for horizontal calculations.