元素进入视野时运行关键帧动画的好方法？

Question

当元素进入视野时，运行关键帧动画的好方法是什么？

$(window).scroll(function () {
  if($(window).scrollTop() > 0) {
    element.addClass("animateMe");
  }
  else {
    element.removeClass("animateMe");
  }
});

此代码有效，但它需要一个静态数字，这对自适应布局不利。

Answer 1

在屏幕上查看框时将触发Console.log()

        var pageTop  = $(window).scrollTop();
        var pageBottom =  pageTop + $(window).height()

        var eleTop = $(".box").offset().top;
        var eleBottom = eleTop +  $(".box").height();

        //only if ele is view on screen     
        if(pageBottom >= eleTop && eleBottom >= pageTop){
               console.log("viewed.....");
        }