<div id="logo">Some Logo here or whatever.</div>
<div id="header" class="header">
  Header Container (NO IE11 support)
</div>
<main>
  <p>Start - First line some content to scroll</p>
  <p>2 some content to scroll</p>
  <p>3 some content to scroll</p>
  <p>4 some content to scroll</p>
  <p>5 some content to scroll</p>
  <p>6 some content to scroll</p>
  <p>7 some content to scroll</p>
  <p>8 some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p class="link"><a href="https://www.google.com/">Go to google</a></p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
  <p>some content to scroll</p>
</main>

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  margin: 0;
  padding: 0;
}

#logo {
  background: #f9f9f9;
  min-height: 100px;
}
/* this element added by JS to act as the observer*/
.myObserver {
  height: 1px;
  width: 1px;
  pointer-events: none;
  position: relative;
  top:auto;
  z-index: -1;
  overflow: hidden;
}
.header {
  background: #06c;
  display: flex;
  padding: 20px;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  font-size: 25px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  font-weight: bold;
  transition: all 0.5s ease-out;
}
/* seems to be buggy when you change height of the header as there seems to be rounding error causing a jumping effect on the header*/
.sticky-element {
  background: red;
  /*font-size: smaller;
  padding: 10px;*/
}

main {
  background-color: #ccc;
}
p {
  margin: 0 0 1rem;
}
.link a{
  background:cyan;
  color:#000;
  display:block;
  padding:10px;
}

//based on : https://usefulangle.com/post/108/javascript-detecting-element-gets-fixed-in-css-position-sticky

(function (d) {
  "use strict";

  //lets add the observer element dynamically.
  var newEl = d.createElement("div");
  newEl.classList.add("myObserver");
  var ref = d.querySelector("#header");
  insertBefore(newEl, ref);
  function insertBefore(el, referenceNode) {
    referenceNode.parentNode.insertBefore(el, referenceNode);
  }

  var observer = new IntersectionObserver(
    function (entries) {
      if (entries[0].intersectionRatio === 0) {
        d.querySelector("#header").classList.add("sticky-element");
        //newEl.classList.add("sticky-observer");
      } else if (entries[0].intersectionRatio === 1) {
        d.querySelector("#header").classList.remove("sticky-element");
        //newEl.classList.remove("sticky-observer");
      }
    },
    { threshold: [0, 1] }
  );

  observer.observe(d.querySelector(".myObserver"));
})(document);