Detecting when div is scrolled to does not work

Question

I'm having trouble detecting when a certain section of the page is scrolled down to. Once I get down to a certain ID or Class, I'd like to run a couple of functions.

I found this solution here, and tried this below, but the code does not activate:

// Once you scroll into that div ID, this still does not get hit:
$( "#slice_video" ).scroll(function() {
    console.log('in scroll...');    
});


// In the comments I also saw this solution, tried it but still nothing working:

function isScrolledIntoView(elem) {
    // alert("method invoked");
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom <=      docViewBottom) && (elemTop >= docViewTop));
}

if (isScrolledIntoView($('.eco_jumbotron'))){

    // initialize modals:
    modals.wireModals($());

    // Animate in Tiles
    animateTiles();
}

JsFiddle for first solution: http://jsfiddle.net/leongaban/6n4bczmu/

JsFiddle for 2nd solution http://jsfiddle.net/leongaban/yxkqafwn/

score 1 · Accepted Answer · answered Aug 27 '14 at 15:22

so your issue is you are trying to scroll on the wrong div firstly.. then you are checking the height of the entire window to that div.. so if you changed it to .container scroll event it would alert every time you scroll. what you want to do is check the scroll relative to the div you are scrolling. so something like this.

function isScrolledIntoView( elem, container )
{
    var contTop = $(container).offset().top;
    var contBottom = contTop + $(container).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= contBottom) && (elemTop >= contTop));
}
$( '.container' ).scroll(function() {
    if ( isScrolledIntoView( $( '.box4' ) , $( '.container' ) ) ) 
    {
        console.log('HERE!');
    }
});

WORKING FIDDLE

Mathieu David · Answer 2 · 2014-08-27T15:27:15.687

0

You have to listen for the scroll event on the container that has the overflow to scroll or auto.

This code did work:

$('.container' ).scroll(function() {
    if($(".box4").position().top < $(".container").position().top + $(".container").height()){
        // code
    }
});

DEMO

I guess you can do better but it's a start.

I hope it helps.

EDIT:

Don't forget to handle the fact that with this method the event will fire every time you scroll a tiny little bit and the div's position is less than the containers (bottom-edge) position

edited Aug 27 '14 at 15:27

answered Aug 27 '14 at 14:48

Mathieu David

4,706
3
18
28

Why does the count activate when you are halfway down div 2? Is it a dom box area issue? – Leon Gaban Aug 27 '14 at 16:02
It activates when the top edge of box 4 reaches the bottom edge of the container (when it starts to be visible). But you can easily change that to only activate it when it is fully visible by changing the expression in the div ;) [DEMO](http://jsfiddle.net/6n4bczmu/39/) – Mathieu David Aug 27 '14 at 16:06

Detecting when div is scrolled to does not work

2 Answers2