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

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

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

        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.....");
        }

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

当在屏幕上查看此框时，将触发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.....");
        }