JSFiddle - React, Tailwind, and code Playground

HTML

<div id="load-content">
    <div class="sticky">
        <button type="button" class="prev">BACK</button>
        <figure>
            <img src="https://www.google.co.in/images/srpr/logo11w.png" />
        </figure>
    </div>
    <h1>GOOGLE LOGO should be always fixed on top</h1>
    <p class="subtitle">In this slick remake of the classic 1987 future-shocker, Joel Kinnaman plays a Detroit detective who's left for dead by a car bomb - only to be rebuilt as a crime-fighting cyborg. But as the property of robotics giant OmniCorp and its devious bosses (Michael Keaton and Gary Oldman), the reconfigured officer Murphy is not expected to have any free will - let alone exercise it. So no matter who's breaking the law, there will be... trouble.
    In this slick remake of the classic 1987 future-shocker, Joel Kinnaman plays a Detroit detective who's left for dead by a car bomb - only to be rebuilt as a crime-fighting cyborg. But as the property of robotics giant OmniCorp and its devious bosses (Michael Keaton and Gary Oldman), the reconfigured officer Murphy is not expected to have any free will - let alone exercise it. So no matter who's breaking the law, there will be... trouble
    In this slick remake of the classic 1987 future-shocker, Joel Kinnaman plays a Detroit detective who's left for dead by a car bomb - only to be rebuilt as a crime-fighting cyborg. But as the property of robotics giant OmniCorp and its devious bosses (Michael Keaton and Gary Oldman), the reconfigured officer Murphy is not expected to have any free will - let alone exercise it. So no matter who's breaking the law, there will be... trouble
        In this slick remake of the classic 1987 future-shocker, Joel Kinnaman plays a Detroit detective who's left for dead by a car bomb - only to be rebuilt as a crime-fighting cyborg. But as the property of robotics giant OmniCorp and its devious bosses (Michael Keaton and Gary Oldman), the reconfigured officer Murphy is not expected to have any free...

CSS

* {
    margin:0;
    padding:0;
}
html, body {
    height: 100%;
    width: 100%;
}
body {
    background-image: radial-gradient(ellipse farthest-corner at center top, #0D2F6B 0%, #000000 75%);
}
.container {
    display:block;
    margin:0 auto;
    width:100%;
    position: relative;
    height: 100%;
}
 h1{
    width:800px;
    color:white;
 
    display:inline-block;
    font-size:30px;
}
button {
    position:fixed;
    top:0;
    left:0;
    z-index:6;
}
h1
{
    position:fixed;
    top:50px;
}
.unit {
    border:2px solid red;
    width:1000px;
    margin:auto;
}
#load-content {
    background-image: radial-gradient(ellipse farthest-corner at center top, #fff 0%, #000000 75%);
    height: 100%;
    opacity: 1;
    position: absolute;
    top: 0;
    transform: translate3d(100%, 0px, 0px);
    transition: all 1.2s ease-out 0s;
    width: 100%;
    z-index: 6;
}
#load-content.loaded {
    transform: translate3d(0%, 0px, 0px);
}
.sticky{
    position:fixed;
    top:0;
}
#load-content.loaded h1{
    width:800px;
    color:red;
    padding-top:300px;
    display:inline-block;
    font-size:30px;
    position:relative;
    top:0;
}
#load-content.loaded .subtitle{
    width:800px;
    color:white;
    display:inline-block;
    
}

JavaScript

var height = $(this).height() - $("body").height()  
$('#load-content').height(height);

$('.show-content').on('click', function (e) {
     e.preventDefault();
     openContent();
 });
 $('#load-content').on('click', '.prev', function (e) {
     e.preventDefault();
     closeContent(this);
 });

 function openContent(ele) {
     var Loaded = !$(ele).closest('.container').hasClass('loaded');
     $('#load-content').addClass('loaded');
     
     $('.sticky').css({position: 'fixed', width: '100%', top: 0});
     
    
     
     
     
     
     

     $('#load-content').on('transitionend.loadcontent.open webkitTransitionEnd.loadcontent.open', function () {
         $(this).addClass('animate');
         $('.container').fadeOut();
         $('#load-content').off('transitionend.loadcontent.open webkitTransitionEnd.loadcontent.open');
     });
 }

 function closeContent(ele) {
     var Loaded = !$(ele).closest('#load-content').hasClass('loaded');
     if (!Loaded) {
         $('.container').fadeIn();
         $('.animate').removeClass('animate');
         $('.loaded').removeClass('loaded');
         $('#load-content').off('transitionend.loadcontent.close webkitTransitionEnd.loadcontent.close');
    }
 }