JSFiddle - React, Tailwind, and code Playground

HTML

<div><nav></nav></div>
<div class="white"><nav></nav></div>
<div><nav></nav></div>
<div class="white"><nav></nav></div>
<div><nav></nav></div>
<div class="white"><nav></nav></div>
<div><nav></nav></div>

CSS

body,html {
    height:100%;
}
div {
    height:100%;
    background:#000;
    position:relative;
    z-index:10;
    overflow:hidden;
}

div.white {
    background:#c8c8c8;
    z-index:12;
    height:150%;
}

nav {
    left:45px;
    position:absolute;
    width:150px;
    height:150px;
    background:red;
    top:0;
    z-index:11;
}

div.white nav {
    background:#00fff0;
    left:90px;
    z-index:13;
}

JavaScript

var viewportHeight = $(window).height();
$('div').each(function(){
    var offset = $(this).offset().top;
    var nav = $(this).find('nav');
    var navheight = 200;
    var parentheight = $(this).height();
    var margin = (viewportHeight-navheight)/2;
    $(window).scroll(function() {
        nav.css('top', $(this).scrollTop()-offset+margin + "px");	   
    });	 	
});