在类中使用jquery waypoints

Question

我有一堆div，其中.container分散在我的页面上。 当我滚动到.container时，我想用jquery触发动画，但我希望动画只在那个div上。

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

如何只选择我滚动到的当前div？

Answer 1

修改

对不起，我误解了你。下面的代码应该允许用户通过滚动事件检测你的一个容器何时进入视图。

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

isScrolledIntoView功能从here解除了无耻。