JSFiddle - React, Tailwind, and code Playground

HTML

<img id="changeImg" src="http://cdn2.collective-evolution.com/assets/uploads/2013/11/lobster.jpeg" />

CSS

body{
    height:900px;    
}
img{
    position:fixed; /* So image won't change height of body */
}

JavaScript

// Store image sources in array to keep track of them
var imgArray = ["http://cdn2.collective-evolution.com/assets/uploads/2013/11/lobster.jpeg",
               "http://www.kathimitchell.com/lobster.gif"];

// Get scrollable height of body, calculate stepsize to go between images
// Partially taken from http://stackoverflow.com/questions/1145850/how-to-get-height-of-entire-document-with-javascript
var body = document.body, html = document.documentElement;
var totalHeight = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight ) - window.innerHeight;
var stepSize = totalHeight/imgArray.length;

// Bind to scroll event
window.onscroll = function(){
    var scrolled = document.body.scrollTop;
    var img = document.getElementById("changeImg");
    
    // Determine correct index to use, and swap src
    var imgIndex = Math.min(Math.floor(scrolled/stepSize), imgArray.length - 1); 
    img.src = imgArray[imgIndex];
};