JSFiddle - React, Tailwind, and code Playground

HTML

<header>header</header>
<span id='indicator'></span>
<main>
  a<br>
  b<br>
  c<br>
  d<br>
  e<br>
  f<br>
  g<br>
  h<br>
  i<br>
  j<br>
  k<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
  a<br>
</main>

CSS

html, body {
  margin: 0;
  padding: 0;
}
header {
  height: 99px;
  background-color: hotpink;
  top: -100%;
  position: sticky;
}
#indicator {
  position: absolute;
  height: 0px;
}
[popup] > body > header {
  background-color: lightblue;
  top: 0;
  height: 50px;
  margin-bottom: 49px;
  transition: 500ms ease;
  transition-property: top;
}

JavaScript

(new IntersectionObserver(function(e,o){
	if(e[0].intersectionRatio>0){
  	document.documentElement.removeAttribute('popup');
  }else{
  	document.documentElement.setAttribute('popup','1');
  };
})).observe(document.getElementById('indicator'));