Scroll based animation only when in viewport

Question

I am animating a div that is absolutely positioned. I'm also turning off the animation if the user is browsing via mobile useragent.

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;
}

My problem is that the div occurs 2000-3000px down the webpage. Far below the top. I want to detect when the element meets the viewport after scrolling down to it, and then begin the scroll based animation. I know I'm doing something wrong with scrollTop.