tuupola / jquery_viewport Goto Github PK

Hi all!

How can I check if an object is not-in-viewport?

Thx

I am using tranlateZ to zoom in/out of image stack.
How do I get to know if an image is now visible in viewport ?

I have a page with three dom elements spread from top to bottom, none are visible on page load. Once element 1 enters into the viewport, both :in-viewport and :above-the-top report that element as one of theirs.

$(window).bind('scroll', function(event){
var videoInView = $('video:in-viewport').attr('id');
console.log('IN VIEWPORT = ' + videoInView);
var videoAboveTop = $('video:above-the-top').attr('id');
console.log('ABOVE THE TOP = ' + videoAboveTop);
var videoBelowFold = $('video:below-the-fold').attr('id');
console.log('BELOW THE FOLD = ' + videoBelowFold);
});

console shows

IN VIEWPORT = video1
ABOVE THE TOP = video1
BELOW THE FOLD = video2

http://immelman.ru/test/viewport/

.outerWidth() / .outerHeight() instead of .width() / .height() could fix it.

Bug found by @subzey.