Javascript触发元素首次变为可见时

Question

我无法在正确的时间让元素生成动画 - 也就是说，当它首次进入不同大小的视口时会显示。

代码是：

<script>
$(window).scroll(function() {
    $('.sright3').each(function(){
    var imagePos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow+500) {
            $(this).addClass("slideRight");
        }
    });
});
</script>

这会在.sright3元素到达窗口顶部500像素时将类.slideright添加到.sright3元素来触发动画。 （topOfWindow + 500） - 问题在于，在不同大小的视口中，元素要么太快开始制作动画，要么只在屏幕的一半处开始动画。

有没有办法定义“窗口底部 - 100”或“窗口顶部+窗口高度的95％”？

感谢您的帮助！