JSFiddle - React, Tailwind, and code Playground

by Rohit Azad

HTML

Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>Some Content here <br>
<div class = "scrollTopWindow">
    Scroll top window and fix me !
</div>

CSS

body{height:2000px}
.scrollTopWindow {
    background-color: red;
    width: 150px;
    height: 100px;
    color: white;
    padding:20px;
}

JavaScript

var oritop = -100;
$(window).scroll(function() {
    var scrollt = $(this).scrollTop();
    var elm = $(".scrollTopWindow");
    if(oritop < 0) {
        oritop= elm.offset().top;
    }
    if(scrollt >= oritop) {
        elm.css({"position": "fixed", "top": 0, "left": 0});
    }
    else {
        elm.css("position", "static");
    }
});