css animation start/stop on scroll

Question

I've made an sprite sheet animation in css and I want it to run only when the page is scrolled, the animation is fixed, how could i do that? here is my animation

 #me{
    background-image: url("walkingirl.png");
    width: 200px;
    height: 509px;
    top: -151px;
    left: 180px;
    position: fixed;
   animation: play 2s steps(10) infinite;
  }

@keyframes play {
    from { background-position: 0 0; }
    to { background-position: -2000px 0; }
}