JSFiddle - React, Tailwind, and code Playground

by adam smth

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div id="img1">


</div>
<div class="placeholder">

</div>
<a id="anchor-point">scroll to here</a>
<script>
var targetOffset = $("#anchor-point").offset().top;

  var $w = $(window).scroll(function() {
    if (($w.scrollTop() + $(window).height()) > targetOffset) {
      $('#img1').css({
        "background-image": "url('http://lorempixel.com/400/200/sports/1/')"
      });
    } else {
     $('#img1').css({
        "background-image": "url('http://lorempixel.com/400/200/')"
      });
    }
  });
</script>

CSS

#img1 {
  background-image: url("http://lorempixel.com/400/200/");
  width: 100px;
  height: 100px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}

.placeholder {
  height: 900px;
  width: 100%;
  background-color: lightblue;
}