JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item item1">
    <div class="header">Header 1</div>
    <div class="fixeditem"></div>
</div>
<div class="item item2">
    <div class="header">Header 2</div>
    <div class="fixeditem"></div>
</div>
<div class="item item3">
    <div class="header">Header 3</div>
    <div class="fixeditem"></div>
</div>

CSS

.item {
    width:100%;
    height:600px;
    position:relative;
    z-index:90;
    overflow:hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;        
}

.item .header {
   position:relative;
   background:green;
   height:40px;
    z-index:91;
}
.item .fixeditem {
    position:fixed;
    width:300px;
    height:300px;
    background:blue;
    left:50%;
    top:100px;
    margin-left:-200px;

}

.item2 .fixeditem {
    width:500px;
    background:yellow;
    margin-left:-100px;
}

.item3 .fixeditem {
    width:200px;
    background:orange;
    margin-left:-300px;
}