Javascript to detect if item no longer visible due to scrolling

Question

I've got a javascript slideshow at the top of my page. When a slide changes to the next image, I call another function to change the background colour of the page.

The client wants the background colour to stop changing when the slideshow is no longer in view, i.e. when the user has scrolled down the page.

Is there any way to detect if an element is no longer visible due to scrolling?

possible duplicate of [How to check if an element is really visible with javascript.](http://stackoverflow.com/questions/704758/how-to-check-if-an-element-is-really-visible-with-javascript) — David Tang, Jun 08 '11 at 05:33
@Box9: That question asks for three pieces of information, of which scrolling is one, but there aren't any really good scrolling answers after two years and that question (unlike this one) says they use Prototype. So I'd say this should stand on its own. — T.J. Crowder, Jun 08 '11 at 05:43

mkilmanas · Answer 1 · 2011-06-08T05:56:15.140

Test code in jQuery

function test() {
    var $elem = $('.test');
    var visibleAtTop = $elem.offset().top + $elem.height() >= $(window).scrollTop();
    var visibleAtBottom = $elem.offset().top <= $(window).scrollTop() + $(window).height();
    if (visibleAtTop && visibleAtBottom) {
        alert('visible');
    } else {
        alert('invisible (at ' + (visibleAtTop ? 'bottom' : 'top') + ')');
    }
}

Full working example at http://jsfiddle.net/9PaQc/1/ (Updated: http://jsfiddle.net/9PaQc/2/ )

P.S. This only checks for vertical scroll. For horizontal, just do the same with top replaced with left, Y -> X and height() -> width()

EDIT

Made it all the way jQuery (to ensure x-browser compatibility) by changing window.scrollY -> $(window).scrollTop()

Awesome. Perfect answer and example, it works beautifully. Thank you :) — demoncodemonkey, Jun 08 '11 at 09:46

score 1 · Accepted Answer · answered Jun 08 '11 at 05:50

1

You can use the jQuery $.scrollTop function, probably from a scroll event handler to script this.

answered Jun 08 '11 at 05:50

Tobias Cohen

19,893
7
54
51

score 0 · Answer 3 · answered Jun 08 '11 at 05:38

0

Use the window.pageYOffset to determine scroll amount in window. Use current offset of the object to check if it is in view. Note that these values are mostly browser dependent, so first check if it exists then act on it.

answered Jun 08 '11 at 05:38

Cem Kalyoncu

14,120
4
40
62

Javascript to detect if item no longer visible due to scrolling

3 Answers3