BASIC CHECK
using getBoundingClientRect & jQuery.
“The returned value is a DOMRect object, which contains read-only left, top, right and bottom properties describing the border-box in pixels. top and left are relative to the top-left of the viewport.”
1 2 3 4 5 |
$.fn.elOnScreen = function(){ var ele = this.get(0); var client = el.getBoundingClientRect(); return client.top < window.innerHeight && client.bottom > 0; } |
jQuery.visible
“This is a jQuery plugin which allows us to quickly check if an element is within the browsers visual viewport, regardless of the scroll position. If a user can see this element, the function will return true.”
jQuery.isOnScreen
“Simple jQuery plugin to determine if an element is within the viewport. Optional parameters allow the user to specify a minimum percentage of the element’s dimensions that must be visible to qualify.”