Geek asks and answers

Javascript to detect if an item is no longer showing due to scrolling

I have a javascript slideshow at the top of my page. When the slide changes to the next image, I call another function to change the background color on the page.

The client wants the background color to stop changing when the slide show is no longer displayed, i.e. when the user scrolls down the page.

Is there a way to detect that the item is no longer showing due to scrolling?

+3
source share
3 answers

You can use the jQuery function $.scrollTop, possibly from scrolla script event handler.

+1
source

JQuery test code

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') + ')');
    }
}

http://jsfiddle.net/9PaQc/1/ (: http://jsfiddle.net/9PaQc/2/)

P.S. . , top left, Y → X height() → width()

jQuery ( x-), window.scrollY → $(window).scrollTop()

+4

window.pageYOffset, . , , . , , , , .

0

More articles:


All Articles