仅在视口中滚动基于动画

Question

我正在制作一个绝对定位的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做错了。