Check if element is visible for certain percentage on screen (viewport)?

Question

How can i detect if some element is visible? For better understading look at the image below.

I want to fire event when the image is half-visible. It would be great if it would work for all browsers and devices (tablets and smartphones).

Answer 1

Jquery.fracs plugin seems to do exactly what you need.

function callback(fracs: Fractions, previousFracs: Fractions) {
    if(fracs > 0.5)
      doSomething();
};

var fracs = $("img").fracs(callback);

Answer 2

Your Window is between

$(document).scrollTop()

and

$(document).scrollTop() + $(window).height()

If the

$(element).offset().top

falls between those, it should be visible.

EDIT: I am assuming your element (whose visibility is to be determined) is absolutely positioned. If not, it would be a bit more complicated.

EDIT2: This is only to determine visibility in case of vertical offset. For the horizontal version, replace "scrollTop" with "scrollLeft", "height" with "width" and "top" with "left".

Answer 3

有一个巧妙的插件，专门为此目的编写的jQuery压缩文件。

Answer 4

You want to check whether the item is viewable from the bottom of the screen or the top. so the logic would be this:

on window scroll event
if item.y is less than scroll.y, calculate amount off screen
if item.y + item.height is greater than scroll.y + scroll.height, calculate amount off screen
deduct both values off the item.height to find the total off screen
create a percentage of this

So in javascript this would work something like this:

var el = document.getElementById('item1'),
    rect = el.getBoundingClientRect(),
    item = {
        el: el,
        x: rect.left,
        y: rect.top,
        w: el.offsetWidth,
        h: el.offsetHeight
     };

window.addEventListener('scroll', function (e) {
    var deduct = 0,
        percentage = 0,
        x = window.pageXOffset,
        y = window.pageYOffset,
        w = window.innerWidth,
        h = window.innerHeight;
    if (item.y < y) {
        deduct += (y - item.y);
    }
    if ((item.y + item.h) > (y + h)) {
        deduct += (item.y + item.h) - (y + h);
    }
    if (deduct > item.h) {
        deduct = item.h;
    }
    percentage = Math.round(((item.h - deduct) / item.h) * 100);
});

I've excluded the support for older browsers, but if you need it it would be:

x = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft,
y = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop,
w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

Answer 5

var $w = $(window), wh = $w.height(),
    top = $w.scrollTop(), bottom = top + wh,
    $img = $("#image"),
    imgCenter = $img.offset().top + $img.height()/2;
if (imgCenter >= top && imgCenter < bottom) {
    // the image is half-visible
}