<div id="logo-container"> Background </div>
<div id="nav-container-top"></div>
<div id="nav-container">This  will get sticky scroll </div>
<div id="main-container"></div>
body {
  margin: 0px;
  font-family: Roboto, Tahoma;
}

#logo-container {
  background-color: #bdc3c7;
  opacity:.25;
  height: 100px;
  text-align:center;
  padding-top:20px;
  font-weight:bold;  
}

#nav-container-top {
  background-color: #bdc3c7;
  min-height: 1px;
  min-width: 1px;
}

#nav-container {
  background-color: #2980b9;
  height: 60px;
  line-height: 60px;
  color: white;
  text-align: center;
  font-size: 18px;
  position: -webkit-sticky;
  /* for safari */
  position: sticky;
  top: 0px;
  font-weight: 700;
  transition: font-size 0.2s ease-in;
}

#nav-container:after {
  content: ' down 👇' 
}

.nav-container-sticky {
  background-color: #e74c3c !important;
  font-size: 18px !important;
}

#nav-container.nav-container-sticky:after {
  content: 'up ☝'
}

#main-container {
  background-color: #ecf0f1;
  height: 2000px;
}
//IE-11 fallback for position sticky
var element = document.querySelector('#nav-container');
Stickyfill.add(element);


//to check when element get's position sticky
var observer = new IntersectionObserver(function(entries) {
  // no intersection 
  if (entries[0].intersectionRatio === 0)
    document.querySelector("#nav-container").classList.add("nav-container-sticky");
  // fully intersects 
  else if (entries[0].intersectionRatio === 1)
    document.querySelector("#nav-container").classList.remove("nav-container-sticky");
}, {
  threshold: [0, 1]
});


observer.observe(document.querySelector("#nav-container-top"));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/stickyfill/2.1.0/stickyfill.min.js
  2. https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver