JSFiddle - React, Tailwind, and code Playground

by mathiasfcx

HTML

<img class="logo" src="https://www.stoughtonutilities.com/images/TOD-clock.jpg" height="60" width="60">

CSS

html {
  height: 900px;
}

.logo {
  position: fixed;
}

JavaScript

$(document).ready(function() {

  $(window).scroll(function() {
    //console.log($(document).scrollTop());

    if ($(document).scrollTop() >= 300) {

      if ($(".logo").attr('src') != "http://i.imgur.com/499DSOf.png") {
        $(".logo").fadeOut('slow', function() {
          $(".logo").attr('src', 'http://i.imgur.com/499DSOf.png');
          $(".logo").fadeIn('slow');
        });
      }

    } else if ($(".logo").attr('src') != "https://www.stoughtonutilities.com/images/TOD-clock.jpg"){
      $(".logo").fadeOut('slow', function() {
        $(".logo").attr('src', 'https://www.stoughtonutilities.com/images/TOD-clock.jpg');
        $(".logo").fadeIn('slow');
      });
    }
  });

});