JSFiddle - React, Tailwind, and code Playground

HTML

<p style="margin-bottom:100px;">Верх этой страницы</p>
<h3 class="sticky">Супер удивительный заголовок</h3>
<p style="margin-top:500px;">Там еще?</p> 
<p style="margin-top:500px;">Тут еще!</p> 
<p style="margin-top:500px;">Там еще?</p> 
<p style="margin-top:500px;">Тут еще!</p> 
<p style="margin-top:500px;">Там еще?</p> 
<p style="margin-top:500px;">Тут еще!</p> 
<p style="margin-top:500px;">Тут еще!</p> 
<p style="margin-top:500px;">Тут еще!</p> 
<p style="margin-top:500px;">Тут еще!</p> 
<p style="margin-top:500px;">Тут еще!</p> 
<p style="margin-top:500px;">Низ страницы!</p>

CSS

body {
    margin: 0;
    text-align: center;
    font-family: sans-serif;
  }
  .fixed {
    position: fixed;
    top: 0;
  }
  .sticky {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    top: 100px;
  
    width: 100%;
    background: #F6D565;
    padding: 25px 0;
    text-transform: uppercase;
  }

JavaScript

var sticky = document.querySelector('.sticky');
var origOffsetY = sticky.offsetTop;

function onScroll(e) {
  window.scrollY >= origOffsetY ? sticky.classList.add('fixed') :
                                  sticky.classList.remove('fixed');
}

document.addEventListener('scroll', onScroll);