JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="fix">
  
  </div>
  <div class="y">
    <div class="s"></div>
    <div class="g">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex.
    </div>
  </div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex.    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex.    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex.    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex.    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex.    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex.    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex.    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex.    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex.   <div class="y">
    <div class="s"></div>
    <div class="g">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex.
    </div>
  </div>   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex.    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex.    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex.    Lorem ipsum dolor sit...

CSS

body{
  margin:0px;
  padding:0px;
}

.main{
  background-color:#FF6600; 
  padding:200px 0px 0px;
}

.fix{
  position:fixed;
 background-color:#FF6600; 
 border-bottom:2px solid black;
 height:200px;
 width:100%;
 top:0px;
 left:0px;
}
.big_pic{
  z-index:2;
  position:relative
}

.y{
  background-color:yellow;  
  width:300px;
  padding:20px;
  margin:20px auto;
  position:relative;
  z-index:2;
  overflow:hidden;
}

.g{
  background-color:green; 
}

.s{
  position:absolute;
  width:100%;
  height:0;
  left:0;
  top:0; 
  background-color:yellow;
}

JavaScript

animThis($(".y"),$(".fix"));	
	$(window).scroll(function(){
		animThis($(".y"),$(".fix"));
	});


function animThis(t,r){
		var h = r.outerHeight();
		t.each(function(){
			var offset = $(this).offset();
      var b = offset.top-h;
      var a = $(window).scrollTop() - b;   	
			$(this).children(".s").height(a+"px");	   
		});

}