JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div id="one">test</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam dignissim nulla, nec bibendum odio laoreet ac. Pellentesque commodo nibh ut est hendrerit dignissim. Nam in orci tellus, vel pharetra magna. In porta congue risus sit amet volutpat. Quisque feugiat elit vel ligula pellentesque gravida. Vestibulum euismod rhoncus tellus, at elementum metus ultrices quis. Duis vel augue enim, non sagittis purus. Mauris pharetra, leo ut tincidunt tristique, est libero facilisis orci, vel dapibus nibh sem a turpis.

Praesent volutpat, massa ac commodo faucibus, ipsum turpis lobortis eros, vel dictum mauris metus a libero. In quis malesuada magna. Pellentesque luctus, nisi ac pellentesque varius, metus magna dictum velit, id consequat mauris sem eget metus. Aliquam euismod bibendum eleifend. Pellentesque viverra nunc in sem volutpat pharetra. Cras lobortis ultricies aliquam. Nulla facilisi. Suspendisse semper erat quis urna eleifend accumsan. Praesent laoreet eros ultrices elit condimentum dignissim. Praesent ultrices vulputate libero, ut pretium nisl varius tempus.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi dignissim magna neque. Proin ut dui sem, pulvinar commodo urna. Aenean at diam tortor, vitae facilisis magna. Cras in hendrerit arcu. Vivamus blandit vulputate nunc, sed sodales arcu convallis in. In elit nulla, hendrerit non condimentum eu, pulvinar at justo. Cras egestas sodales pulvinar. Duis tortor lectus, interdum sit amet feugiat et, interdum tincidunt diam. Etiam porttitor leo imperdiet tortor luctus congue. Nulla vel enim sapien, quis fringilla arcu.

Integer vel arcu quis purus rhoncus rutrum. Vivamus non felis id sem luctus laoreet. Donec eu enim suscipit metus vulputate pretium a vel tortor. Praesent nibh turpis, consectetur ac rhoncus ut, tempus nec sem. Pellentesque neque urna, viverra nec tempus vitae, porttitor et magna. Curabitur porta augue et neque adipiscing...

CSS

#one {
    float: left;
    position: absolute;
    top: 40px;
    right: 50px;
    background: #222;
    color: #fff;
    padding: 20px;
}

JavaScript

var theOne = $('#one');

$(window).scroll(function () {


    var toOffset = theOne.offset();

    if ( toOffset.top <= 0 ) {
        theOne.css({
            top: '0'
        });

    }
    
    if ( toOffset.top <= -(theOne.height()) ) {
        theOne.css({
            top: theOne.height()
        });
        

    }
                    
});