动画不会显示隐藏块

animation wont show hidden blocks

我正在尝试制作自己的 wow.js 版本,原因有两个,第一个是 wow.js 似乎不再维护,第二个是因为它只显示动画一次

我遇到的问题是我的代码在向下滚动时不显示动画,只有在向上滚动时才显示动画,我可以找到原因...

谁能帮我找出错误?

负责显示元素的函数是这样的:

function showBlocks() {
    $('.wow2').each(function () {
        var elementTop = $(this).data('wow2-top');

        $(this).html(elementTop);

        // Shows Elements
        if ((elementTop >= top) && (elementTop <= bottom)) {
            $(this).css('visibility', 'visible');
            $(this).addClass('animated').addClass($(this).data('wow2-class'));
        }
        /*
         // Hides Elements
         if ((elementTop < top) || (elementTop >= bottom)) {
         $(this).css('visibility', 'hidden');
         $(this).removeClass('animated').removeClass($(this).data('wow2-class'));
         }
         */
    });

}

这是我的 jsfiddle:

在滚动时,您更新的是 top 的值,而不是 bottom 的值。尝试

$(window).scroll(function () {
    top = $(window).scrollTop();
    bottom = top + viewportHeight;
    showBlocks();
    writePosition();
});

https://jsfiddle.net/5q7gryqr/4/