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).

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).

• javascript
• jquery

• 1 Is your image absolutely positioned? Also, awesome avatar! – Emanuele Ciriachi Commented Mar 28, 2014 at 10:10
• Yes, image is absolutely positioned. – Manny Commented Mar 28, 2014 at 10:13

5 Answers 5

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);

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".

There's a neat plugin, jQuery fracs written specifically for this purpose.

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;

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
}