JSFiddle - React, Tailwind, and code Playground

HTML

<body onscroll='scroll(event)'>
  <div class='top' id='top'><img src='http://www.vejanomapa.net.br/wp-content/uploads/2013/03/Maria-Fuma%C3%A7a-em-Tiradentes-MG.jpg'></div>
  <div class='bottom' id='bottom'>
    <div class='menu'>Menu</div>
    <div class='main'><img src='http://tvulavras.com.br/wp-content/uploads/2017/04/maria-fuma%C3%A7a.jpg'></div>
  </div>
</body>

CSS

html, body {
	margin:0;
}
body {
	overflow-y:scroll;
	overflow-x:hidden;
}
img {
	display:block;
}

.top {
	background:#FCC;
  display:block;
	top:0;
  position: stickey;
}

.active{
  position: fixed;
}

.active ~ .bottom {
  margin-top: 386px;
  padding-left: 100px;
}

.active ~ .bottom .menu {
  position: fixed;
  top: 200px;
  bottom: 0;
  left: 0;
}

.bottom {
	display:flex;
	min-height:1500px;
	background:#CFC;
}
.menu {
	min-width:100px;
	background:#CCF;
}

JavaScript

function scroll(e) {
	var T = document.getElementById('top');
  var B = document.getElementById('bottom');
	var imgH = T.clientHeight; // header image height
	var hH = 200; // fixed header height
	if (imgH-e.pageY > hH) { // image is scrolling
  	T.classList.remove('active')
		T.style.top = '-'+e.pageY+'px';
    
		T.style.position = 'sticky';
    B.style['margin-top'] = '0';
	} else { // image should remain fixed
  	T.classList.add('active')
		T.style.top = '-'+(imgH-hH)+'px';
	}
}