Edit in JSFiddle

(function() {
    var lastScroll = 0;
    var dir = document.getElementById('dir');

    window.addEventListener('scroll', function(ev) {
        if (window.scrollY > lastScroll) {
            document.body.className = 'down';
            dir.innerHTML = '↓';
        } else {
            document.body.className = 'up';
            dir.innerHTML = '↑';
        }
        lastScroll = window.scrollY;
    }, false);
})();

<div id="dir"></div>

body {
  height: 1000px;
}

#dir {
  font-size: 300px;
  text-align: center;
  position: fixed;
  -moz-transition: all 300ms ease-in;
  -ms-transition: all 300ms ease-in;
  -o-transition: all 300ms ease-in;
  -webkit-transition: all 300ms ease-in;
  transition: all 300ms ease-in;
  width: 100%;
}

.up {
  background-color: #AAF;
}

.down {
  background-color: #FFA;
}