JSFiddle - React, Tailwind, and code Playground

by Malik Naik

HTML

<div id="page" class="page">
    
             <div class="container">
             
                    <div class="contentheadercontainer">
                    
                        <div class="fsh"><div class="firstheader">Sub header 1</div></div>
                        <div class="fsh"><div class="secondheader" id='secondheader'><p style='margin-left: 15px;'>Sub header 2</p></div></div>
                           
                            </div>
                    
                    </div>
             
             </div>
    </div>
<p id="demo">asdffdsafsadf</p>
<script>
    function scrollDetect(){
        var html = document.documentElement;
        var top = (window.pageYOffset || html.scrollTop)  - (html.clientTop || 0);
        if(top > 200){
          document.getElementById('secondheader').style.position = 'fixed';
     document.getElementById('secondheader').style.marginTop = '60px';
     document.getElementById('secondheader').style.width='100%';
    }else{
    document.getElementById('secondheader').style.position = 'inherit';
     document.getElementById('secondheader').style.marginTop = '300px';
    }
        document.getElementById('demo').innerHTML = top;
    }
</script>

CSS

body{
    padding: 0px; margin: 0px;
}
.container{
    height: 1000px;
}
.fsh{
    position: absolute; width: 100%;
}
.firstheader{
    height: 30px;width: 100%; position:fixed; background: #B14345; padding: 15px; color: #fff;
}
.secondheader{
    border-top: 1px solid #bbb; padding: 5px 0px 5px 0px; margin-top: 300px; width: 100%; background: #B14345;color: #fff;
}

JavaScript

document.addEventListener("scroll", function(){
    scrollDetect();
});