Sticky Header

.css

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

.sticky + .content {
  padding-top: 102px;
}

.html

<div class="header" id="header">
  <h2>My Header</h2>
</div>

<div class="content">
  <h3>On Scroll Sticky Header</h3>
  <p>The header will stick to the top when you reach its scroll position.</p>
  <p>Scroll back up to remove the sticky effect.</p>
</div>

.Js

<script>
window.onscroll = function() {myFunction()};

var header = document.getElementById("header");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
</script>