Stickey header

<style type="text/css">
.sticky {
  position: sticky;
  font-size: 32px;
  top: 0;
  width: 100%;
  height: 100px;
  padding: 1em 0;
  background: #34495e;
  color: white;
  text-align: center;
 transition: .32s;
}

.fixed {
  font-size: 24px;
  position: fixed;
  height: 20px;
  transition: .25s;
}

.top {
  text-align: center;
  background: #2980b9;
  color: #fff;
}

.bottom {
  padding: 5em 0;
  background: #2980b9;
  color: white;
  text-align: center;
}

body {
  margin: 0;
}

:root {
  height: 1000%;
  font-family: sans-serif;
}

</style>

<div class="top">Scroll \/</div>
<div class="sticky">Animated header</div>
<div class="bottom">Content</div>
<div class="bottom">Content</div>
<div class="bottom">By: Felipe Martinin</div>

<script type="text/javascript">
var sticky = document.querySelector('.sticky');

if (sticky.style.position !== 'sticky') {
  var stickyTop = sticky.offsetTop;

  document.addEventListener('scroll', function () {
    window.scrollY >= stickyTop ?
      sticky.classList.add('fixed') :
      sticky.classList.remove('fixed');
  });
}

</script>