setInterval inside conditional statement jQuery

I have an image that translates with the user scroll. If the image stays on a specific place for more than 3 seconds, it should be replaced by another image.

If the place changes, the counter should be reset.

secondsUntilImageReplacement = 3;

if ( imagePosition == definedPosition ) {
   interval = setInterval(function() {
     if ( counter == secondsUntilImageReplacement ) {
       // Replace Image
     }
     ++counter;
   }, 1000);
}
else {
  window.clearInterval( interval );
  counter = 0;
}

Unfortunately the code does not work as I supposed it to do. If I once reach the definedPosition the code runs, even I it scroll further (translate the image off the definedPosition)

What do I do wrong?