using jquery waypoints with classes

Question

I have a bunch of divs with class .container scattered across my page. I want to trigger an animation with jquery when I have scrolled to a .container but I want the animation to be only on that div.

$('.container').waypoint(function(direction){
    $this = $(this);
    $(function(){
        //$this here selects the last div with class .container
    });
},{offset: 'bottom-in-view'});

How can I select only the current div I've scrolled to?

Add another class? ```class="container waypoint"``` then ```$('.waypoint')``` — Christopher Marshall, Jul 09 '14 at 01:00
Christopher if you mean adding .waypoint to the div I want to animate - I need animations on all of the divs I just need them to be when the user has scrolled to them so they can actually see it. If you mean adding .waypoint to the scrolledTo .container I still can't figure out how to select that current .container — Иван Божков, Jul 09 '14 at 01:19

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

Edit

Sorry, I misunderstood you. The code below should allow one to detect when one of your containers comes into view via the scroll event.

'use strict';

$(function() {
    var containers = $('.container');

    function isScrolledIntoView(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

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

        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }

    window.onscroll = function (event) {
        for (var i = 0; i < containers.length; i++) {
            var container = containers[i];
            if (isScrolledIntoView(container)) {
                // animate as needed here
                console.log('you can see' + container.innerHTML);
            }
        }
    };
});

The isScrolledIntoViewfunction was shameless lifted from here.

edited May 23 '17 at 11:57

Community

1
1

answered Jul 09 '14 at 01:04

m.casey

2,449
13
10

My mouse might be on the title of the browser - the animations will never appear. Plus I want the animations to work on mobile devices too. – Иван Божков Jul 09 '14 at 01:07
It needs a few fixes to trigger the effects only once but I think everyone got the idea. Thanks! – Иван Божков Jul 09 '14 at 01:45
Happy to lend a hand! – m.casey Jul 09 '14 at 02:03

using jquery waypoints with classes

1 Answers1