JSFiddle - React, Tailwind, and code Playground

by timsalabim

HTML

<div class="span2" data-motopress-type="static" data-motopress-static-file="static/static-logo.php">
    <div class="logo pull-left">
<a href="http://#" class="logo_h logo_h__img"><img src="http://citricdigital.com/wp-content/uploads/2014/11/logo_01.png" alt="Chop" title="Test" data-scroll="http://citricdigital.com/wp-content/uploads/2015/04/logo_01_white.png" ></a>

        <p class="logo_tagline"></p>
    </div>
</div>

CSS

body {
    height: 2000px;
}
img {
    height: 100px;
    position: fixed;
}

JavaScript

<!-- Logo Scroll -->

var img = document.querySelector('.logo_h__img img'); // get the element
img.dataset.orig = img.src; // using dataset is just being fancy. probably don't do this
document.addEventListener('scroll', function (e) { // add the event listener
    if (document.body.scrollTop > 0) { // check the scroll position
        img.src = img.dataset.scroll; // set the scroll image
    } else {
        img.src = img.dataset.orig; // set the original image back
    }
});