JSFiddle - React, Tailwind, and code Playground

by Gourav Singh

HTML

<div style="height:1000px;background:aqua;">
<header style="height:600px;background:green;">
    <div class="container">
        <div class="row" style="display: flex; justify-content: center">
            <div class="col-xs-12 text-center" style="align-self: center;">
                <h1 style="height:100px;background:white;top:250px">My header</h1>
                <span style="height:60px;background:yellow;"id="slogan">my slogan</span>
            </div>
        </div>
    </div>
</header>
</div>

JavaScript

$(function(){
    var headingHeight = 100;   
       $(window).scroll(function (){        
            var windowScrollTop = $(window).scrollTop();
            var headerHeight = $('header').height();
            
            var newMargin = $('h1').css('top') + windowScrollTop;
            //(headerHeight-windowScrollTop-headingHeight)/2;
            
            $('h1').css({'top': newMargin});
           
            }
        );
       
   })