JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="main">
		<div id="block">This needs to slide on top</div>
		<div id="bluestripe">
		    <img id="sea" src="https://images.pexels.com/photos/6644/sea-water-ocean-waves.jpg?w=940&h=650&auto=compress&cs=tinysrgb" alt="" class="clip-polygon">
		</div>
    <div id="row1"></div>
  </div>
</body>

CSS

/* Sections
    --------------------------------------------- */
	body {margin: 5px;}
  
  #main {height:100vh;}
	#below-main {height:100vh;}
	#row1 {height:100vh;}
	
	
	/* Paralellogram to slide underneath block
    --------------------------------------------- */
	#bluestripe {  
	  height: 60vh;
	  width:60vw;
	  margin: 0 auto;
  }

  img {width: 100%;}

  .clip-polygon {clip-path: polygon(100% 0, 100% 40%, 0 100%, 0 60%);}
	
  /* Block to sit above parallelogram
    --------------------------------------------- */
	#block {
    height: 50px;
    width:100px;
	  margin: 50px auto 0 auto;
	  transform: translate3d(0px,0px,0px);
    background-color: #999;
   }

JavaScript

window.onscroll = function(){
	var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
	var para = Math.round(scrollTop / 1.2);
	document.querySelector('#block').style.transform = "translate3d(0px," + para + "px,0px)";
}