Javascript, check if element has left the screen

Question

I'm trying to test if a <div> has been scrolled out of view.

This is what I have so far,

$(window).on('scroll',function(){
    var divBottom    = $('#home').offset().bottom; 
    var windowTop    = $(window).scrollTop();           
    var windowBottom = windowTop + $(window).height();  

    if (divBottom >= windowTop) {
        console.log("yes");
    } else {
        console.log("no");
    }
});

No matter where I scroll, nothing is logged.

What I was trying to test is if the bottom of the div has gone past the top of the window.

this can help you http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling — MaVRoSCy, Dec 17 '13 at 12:52

score 5 · Answer 1 · answered Dec 17 '13 at 12:58

There's a very useful Vanilla JS function that could help here.

var divposition = document.getElementById('home').getBoundingClientRect();
if( divposition.left+divposition.width < 0) {
    // element is off to the left of the view
}
if( divposition.top+divposition.height < 0) {
    // element is off the top of the view
}
if( divposition.top > window.innerHeight) {
    // element is off the bottom of the view
}
if( divposition.left > window.innerWidth) {
    // element is off to the right of the view
}

Hope this helps!

jeremija · Accepted Answer · 2013-12-17T13:38:53.683

4

divBottom is undefined. You can use the top offset of the element and then calculate it's bottom value by adding it's height to the top, like in this fiddle.

$(window).on('scroll',function(){
    var $home = $('#home');
    var divBottom     = $home.offset().top + $home.height(); 
    var windowTop    = $(window).scrollTop();           

    console.log(divBottom, windowTop);

    if (divBottom >= windowTop) {
        console.log("yes");
    } else {
        console.log("no");
    }
});

edited Dec 17 '13 at 13:38

answered Dec 17 '13 at 12:58

jeremija

2,338
1
20
28

1

+1 for saying *exactly* what I was going to say but 3 minutes quicker ;) – Moob Dec 17 '13 at 13:03
2

`$("#home").offset().top + $("#home").height()` violates DRY. Prefer `var $home = $("#home"), divBottom = $home.offset().top + $home.height();` instead. – Niet the Dark Absol Dec 17 '13 at 13:08
Yes many thanks for the answer! I just chucked 3 console logs in to see that my var bottom was "undefined" and doing offset top + height is the obvious answer i over looked! thanks again guys – user2979139 Dec 17 '13 at 13:09
You're welcome, glad I could help. @NiettheDarkAbsol You're right, but this was only a sketch. I've updated my answer. – jeremija Dec 17 '13 at 13:40

score 0 · Answer 3 · answered Dec 17 '13 at 12:54

0

Try this.

var myTop        = $('#home').offset().top;  // the top y location of your element
var windowTop    = $(window).scrollTop();           // the top of the window
var windowBottom = windowTop + $(window).height();  // the bottom of the window

then

if (myTop > windowTop && myTop < windowBottom) {

answered Dec 17 '13 at 12:54

A Paul

8,113
3
31
61

This fires when the div is fully on screen, I'm trying to get it to fire when the div has just left the screen, 'divBottom > screen top' – user2979139 Dec 17 '13 at 13:03

score 0 · Answer 4 · answered Dec 17 '13 at 12:55

0

Try:

$(window).scroll(function(){ 
//your code 
});

answered Dec 17 '13 at 12:55

jvv

188
1
14

1

I think scroll is not a problem here as it is always giving "no". The div position calculation is not proper here. – A Paul Dec 17 '13 at 12:58

Javascript, check if element has left the screen

4 Answers4