JSFiddle - React, Tailwind, and code Playground

by Paul Leech

HTML

<div id="first-block"></div>
<div id="block-menu"></div>
<div id="second-block"></div>

CSS

body {
    margin: 0;
}

#block-menu {
    background: rgb(27, 85, 131);
    position: relative;
    height: 200px;
    width: 100%;
}

#first-block {
    height: 300px;
    width: 100%;
    background: orange;
}

#second-block {
    height: 2000px;
    width: 100%;
    background: purple;
}

JavaScript

$(document).scroll(function() {
    var y = $(document).scrollTop(), //get page y value 
        header = $("#block-menu");
    if(y >= 300)  {
        header.css({position: "fixed", "top" : "0", "left" : "0"});
    } else {
        header.css("position", "relative");
    }
});