Jquery 仅在视口中时基于滚动的动画

我正在制作一个绝对定位的div动画。如果用户正在通过移动用户代理浏览，我也会关闭动画

JS:

$(window).on('scroll', onScroll);
function onScroll() {
  $('.overlay-bottom article').css('top', $(window).scrollTop() * -.04);
  if (/Mobi/.test(navigator.userAgent)) {
        $(window).off('scroll', onScroll);
  }
}

CSS:

.overlay-bottom article {
  position: absolute;
  right: 105px;
  top: -170px;
}

我的问题是div在网页上以2000-3000px的速度出现。远低于顶部。我想在向下滚动到元素后检测元素何时与视口相遇，然后开始基于滚动的动画。我知道我的scrollTop有问题