JSFiddle - React, Tailwind, and code Playground

by Felype Rennan

HTML

<div style="height:40000px; background: linear-gradient(black, white);"></div>
<div class="uga-debuga">NĂŁo rolou nada ainda.</div>

CSS

body {
    margin: 0;
}

.uga-debuga {
    position: fixed;
    padding: 12px;
    top: 0;
    width: 100%;
    text-align: center;
    color: red;
    font-size: 27px;
    top: 40vh;
}

JavaScript

var old_scroll = 0;
$(document).scroll(function() {
    var new_scroll = $(document).scrollTop();
    if(new_scroll > old_scroll) {
        $('.uga-debuga').text("Rolou pra baixo");
    } else {
        $('.uga-debuga').text("Rolou pra cima");
    }
	old_scroll = new_scroll;
});