JSFiddle - React, Tailwind, and code Playground

by Somnath Kharat

HTML

<div class="wrap">
    <div id="fixed-header"></div>
    <div class="container"></div>
    <div class="sticky-header">This needs to be fixed when hits top of screen</div>
</div>

CSS

.wrap {
    height:1000px;
}
#fixed-header {
    width:100%;
    position:fixed;
    height:50px;
    border:1px solid black;
    top:0px;
    background-color:red;
}
.container {
    height:300px;
    width:100%;
    background-color:blue;
}
.sticky-header {
    width:700px;
    height:50px;
    background:orange;
}
.sticky-header {
    height:30px;
    width:100%;
    background:yellow;
}
.fixed{
    position: fixed;
    top:52px;
}

JavaScript

var offset = $(".sticky-header").offset();
var sticky = document.getElementById("sticky-header");
var additionalPixels = 50;

$(window).scroll(function () {
    
    if ($(this).scrollTop() > offset.top - additionalPixels) {
        $('.sticky-header').addClass('fixed');
    } else {
        $('.sticky-header').removeClass('fixed');
    }
});