JSFiddle - React, Tailwind, and code Playground

by Patrick Hund

HTML

<nav id="navbar_cont">my navbar</nav>
<p>
  garply xyzzy qux fasel fasel 
</p>
<p>
  bazong quux fred grault bazong argh bazong bar blub
</p>
<p>
  garply xyzzy qux fasel fasel 
</p>
<p>
  bazong quux fred grault bazong argh bazong bar blub
</p>
<p>
  garply xyzzy qux fasel fasel 
</p>
<p>
  bazong quux fred grault bazong argh bazong bar blub
</p>
<p>
  garply xyzzy qux fasel fasel 
</p>
<p>
  bazong quux fred grault bazong argh bazong bar blub
</p>
<p>
  garply xyzzy qux fasel fasel 
</p>
<p>
  bazong quux fred grault bazong argh bazong bar blub
</p>
<p>
  garply xyzzy qux fasel fasel 
</p>
<p>
  bazong quux fred grault bazong argh bazong bar blub
</p>
<p>
  garply xyzzy qux fasel fasel 
</p>
<p>
  bazong quux fred grault bazong argh bazong bar blub
</p>
<p>
  garply xyzzy qux fasel fasel 
</p>
<p>
  bazong quux fred grault bazong argh bazong bar blub
</p>
<p>
  garply xyzzy qux fasel fasel 
</p>
<p>
  bazong quux fred grault bazong argh bazong bar blub
</p>
<p>
  garply xyzzy qux fasel fasel 
</p>
<p>
  bazong quux fred grault bazong argh bazong bar blub
</p>
<p>
  garply xyzzy qux fasel fasel 
</p>
<p>
  bazong quux fred grault bazong argh bazong bar blub
</p>
<p>
  garply xyzzy qux fasel fasel 
</p>
<p>
  bazong quux fred grault bazong argh bazong bar blub
</p>
<p>
  garply xyzzy qux fasel fasel 
</p>
<p>
  bazong quux fred grault bazong argh bazong bar blub
</p>
<p>
  garply xyzzy qux fasel fasel 
</p>
<p>
  bazong quux fred grault bazong argh bazong bar blub
</p>
<p>
  garply xyzzy qux fasel fasel 
</p>
<p>
  bazong quux fred grault bazong argh bazong bar blub
</p>
<p>
  garply xyzzy qux fasel fasel 
</p>
<p>
  bazong quux fred grault bazong argh bazong bar blub
</p>
<p>
  garply xyzzy qux fasel fasel 
</p>
<p>
  bazong quux fred grault bazong argh bazong bar blub
</p>
<p>
  garply xyzzy qux fasel fasel 
</p>
<p>
  bazong quux fred grault bazong argh bazong bar blub
</p>
<p>
  garply xyzzy qux fasel fasel 
</p>
<p>
  bazong quux fred grault bazong argh...

CSS

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + #call-to-action  {
  padding-top:164px;
}

JavaScript

// When the user scrolls the page, execute myFunction 
window.onscroll = function() {
  myFunction()
};

// Get the navbar
var navbar = document.getElementById("navbar_cont");

// Get the offset position of the navbar
var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}