JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="a" class="panels">FIXED PANEL</div>
    <div id="b" class="panels">Scrolling-Panel 1</div>
    <div id="c" class="panels">Scrolling-Panel 2</div>
    <div id="d" class="panels">Scrolling-Panel 3</div>
</div>

CSS

html,body {
    padding:0;
    margin:0;
    background:black;
}

#wrapper {
    position:absolute;
    height:100%;
    width:100%;
}

.panels {
    position:relative;
    height:100%;
    min-height:100%;
    width:100%;
    z-index:1000;
}

#a{
   background:#eee;
    position:fixed;
    color:red;
    top:0;
    z-index:-99;
}

#b{
   margin-top:100%;
   background:yellow;
}

#c{
   background:pink;
}

#d{
   background:green;
}