JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<div>


<p>The height of this window is <span id="span1">unknown</span> px.</p>
<p>The height of this document is <span id="span2">unknown</span> px.</p>

<button>Return the height of the window and document elements</button>
<header id="header">hello.</header>
</div>
</body>

CSS

#header {

background-color: green;

}

JavaScript

$(document).ready(function(){
    /*$("button").click(function(){
        $("#span1").text($(window).height());
        $("#span2").text($(document).height());
    });*/
    var headerHeight = 200;
    var windowHeight = $(window).height();
    var headerPosition = $(window).height()-headerHeight;
    $("#header").css('position', 'relative');
    $("#header").css('top', headerPosition);
   /*$("#header").css('top', windowHeight*.25);*/
    
   $(window).on('load resize', function(){
    var windowHeight = $(window).height();
    var headerPosition = $(window).height()-headerHeight;
    $("#header").css('position', 'relative');
    /*this could work but is it better than just using headerPosition?*/
    /*$("#header").css('top', function(){return $(window).height() * 0.25});*/
    $("#header").css('top', headerPosition);
    /*$("#header").css('top', windowHeight*.25);*/
    });
});

$(document).ready(function(){
  $("#header").css('background-color', 'blue !important');
});