Randomize image once scrolled away

I have 17 different image classes that I am trying to swap between, one at a time, but only after the user scrolls it away. console.log() is also not working within this script.

View this code here: www.lobdell.me

<script type="text/javascript">
    window.addEventListener('scroll', function(e){
      if (window.scrollY >= 400 && window.scrollY <= 600){
      if (window.lastTime && Date.now() - window.lastTime < 1000) return;
      var roll = document.querySelector('#logoRoller');
        roll.classList.remove("logo1","logo2","logo3","logo4","logo5","logo6","logo7","logo8","logo9","logo10","logo11","logo12","logo13","logo14","logo15","logo16");
        roll.classList.add("logo"+ Math.floor(Math.random() * 16 + 1));
        window.lastTime = Date.now();
      }
    })

The randomize snippet is working on page refresh just fine, as shown here:

<script type="text/javascript">
document.getElementById("logoRoller").classList.add("logo"+ Math.floor(Math.random() * 16 + 1));