JSFiddle - React, Tailwind, and code Playground

HTML

<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<img id="image" src="https://image.ibb.co/eQFRx7/post_2852_0_65714800_1522594854_thumb.png" alt="image"/>
<br>
<br>
<br>
<br>
<div id="footer" style="background:#333;height:300px">
<p>
The footer
</p>
</div>

CSS

img{position:fixed;left:10px;top:50%;}

JavaScript

window.onscroll = function(ev) {
    var footerCoords = footer.getBoundingClientRect();
    if (footerCoords.top > pageYOffset) {
    	return;
    }
    image.style.top = '';
    var imageCoords = image.getBoundingClientRect();
    if (imageCoords.bottom >= footerCoords.top) {
    	image.style.top = footerCoords.top - image.height + 'px';
		}
};