JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div class="container">
    <div class="cover-photo-container">Please scroll</div>
    <div class="small-box"></div>
    <div class="small-box"></div>
    <div class="small-box"></div>
    <div class="small-box"></div>
    <div class="clear">
        <div>
            <div class="sticky-header">This needs to be fixed when hits top of screen</div>
        </div>

CSS

body {
    margin:0px;
    padding:0px;
}
.clear {
    clear:both;
}
.container {
    height:2000px;
}
.cover-photo-container {
    width:700px;
    height: 100px;
    margin-bottom: 20px;
    background-color:red;
}
.small-box {
    width:163px;
    height:100px;
    border:1px solid blue;
    float:left;
}
.sticky-header {
    width:700px;
    height:50px;
    background:orange;   
}
.fixed{
     position: fixed;
    top: 0px;
}
}

JavaScript

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

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

});