jquery - 动画不会显示隐藏 block

Question

我正在尝试制作我自己的 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 :

Answer 1

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

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

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