JSFiddle - React, Tailwind, and code Playground

by Sanjito Kurniawan

HTML

<p class="monitor"></p>
<p class="hint">Things will happen at 500, 1000, 2500, and 5000; start scrolling up!</p>
<div class="box"></div>

CSS

.box {
    width: 100%;
    height: 7500px;
    background: linear-gradient(to bottom, #ffcb77 0%,#deaaff 100%);
}

p { position: fixed; }
.hint { top: 16px; }

JavaScript

$(window).scroll(function() {
    
    // Update .monitor
    $(".monitor").html( $(this).scrollTop() );
    
    if ($(this).scrollTop() < 5000) { $(".hint").html("5000 hit, keep scrolling!") }
    if ($(this).scrollTop() < 2500) { $(".hint").html("2500! You're halfway!") }
    if ($(this).scrollTop() < 1000) { $(".hint").html("1000! Keep going!") }
    if ($(this).scrollTop() < 500) { $(".hint").html("500! Just a bit more!") }
    if ($(this).scrollTop() == 0) { $(".hint").html("You have reached the top of the page!") }
    
});

// Set scroll to bottom of the page when it has finished loading
$(window).scrollTop(9999);