JSFiddle - React, Tailwind, and code Playground

HTML

<section></section>
<div></div>
<footer></footer>

CSS

body {
  position: relative;
  height:1500px;
}
div {
  display:none;
  position:fixed;
  width:100%;
  top:0;
  left:0;
  background:black;
  height:50px;
}
section,footer {
  height:150px;
  background:red;
}
footer {
  position: absolute;
  bottom:0;
  width:100%;
}

JavaScript

$(window).scroll(function(){
	var st = $(window).scrollTop(),
  		wh = $(window).height(),
      dh = $(document).height();
  if(st >= 150 && st+wh <= dh-150){
  	$('div').fadeIn();
  } else {
  	$('div').fadeOut();
  }
})