JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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).on('scroll', onScroll);

function onScroll(ev) {
  var footerCoords = footer.getBoundingClientRect();
  if (footerCoords.top > $(window).scrollTop()) {
    return;
  }
  $(image).css('top', '');
  var imageCoords = image.getBoundingClientRect();
  if (imageCoords.bottom >= footerCoords.top) {
    $(image).css('top', footerCoords.top - image.height);
  }
}