JSFiddle - React, Tailwind, and code Playground

by tobek

HTML

<p>Scroll down...</p>

<div></div>

CSS

div {
    background-color: green;
    display: inline-block;
    border: 10px dashed black;
    width: 20px;
    height:2000px;
}

p {
    font-size: 50px;
}

JavaScript

$(document).ready(function(){
    $(document).on("scroll", maybeSlide);
});

function maybeSlide() {
    if (document.body.scrollTop > 50) {
        // after scrolling down 50px, slide it up
        $("p").slideUp();
    }
    else {
        $("p").slideDown();
    }
}