JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">header</div>
<div class="splash_screen">put image here</div>
<div class="content content_fix">content</div>
<div class="content_shadow"></div>

CSS

.header{position:fixed;left:0;right:0;line-height: 40px;top:0;border:1px solid #000;background: #39464e;z-index:3;}
.splash_screen{position:relative;z-index: 2;height: 400px;line-height:400px;text-align:center;background:#ffa200;}
.content{margin-top:60px;height: 2400px;z-index:1;background:#ddd;}
.content_fix{position: fixed;top:50px;margin-top:0;}
.content_shadow{height: 2900px;}

JavaScript

$(document).on('scroll', function () {
	if ($(document).scrollTop() > $('.splash_screen').height()) {
  	$('.content').removeClass('content_fix')
  	$('.content_shadow').css('height', 0)
  } else {
  	$('.content').addClass('content_fix')
  	$('.content_shadow').css('height', $('.content').outerHeight())
  }
})