JSFiddle - React, Tailwind, and code Playground

HTML

<div>This is just some stupid text unworthy of being read, so please don't waste
    <br>your time reading this nonesense.
    <br>Hey! why are you still reading this garbage?
    <br>Stop reading now and start doing something useful, such as getting this leaf to move up
    <br>while you scroll this page.
    <br>On second thought, maybe just continue reading.
    <br>This might be more productive then whatever
    <br>it is you were doing before.</div>
<img src="http://sweetclipart.com/multisite/sweetclipart/files/imagecache/middle/nature_seasons_spring_leaf_green.png">

CSS

div {
    width: 150px;
    height:150px;
    overflow: scroll;
}
img {
    position: absolute;
    top:400px;
    left:150px;
    width:50px;
}

JavaScript

var lastScrollTop = 0;
$("div").scroll(function (event) {
    var st = $(this).scrollTop();
    if (st > lastScrollTop) {
        $('img').animate({top: '-=10'}, 10);
    } else {
        $('img').animate({top: '+=10'}, 10);
    }
    lastScrollTop = st;
});