JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<header id="header">Menu und Co sind hier</header>
<div style="padding-top:20px;">
  &nbsp;
</div>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>

CSS

body {
  margin: 0;
}

#header {
  background: rgba(255, 255, 255, 1);
  height: 50px;
  width: 100%;
}

#header.sticky {
  top: 0;
  left: 0;
  position: fixed;
  background: rgba(255, 255, 255, 0.8);
}

p {
  margin-bottom: 400px;
}

JavaScript

//sticky header
$(document).ready(function() {
  $(window).scroll(function() {
  if ($(this).scrollTop() > 100){$("#header").addClass("sticky");}
  else{$("#header").removeClass("sticky");}
  });  
});