Sticky navi

by Lestrae https://twitter.com/Lestrae1

by Lestrae

HTML

<main>
  <div id='mob-nav'>
    lalala i'm navi
  </div>
</main>

CSS

main {
  height:1000px;
}

#mob-nav {
  background: #242424;
  color: wheat;
  padding:10px;
}

.mob-nav-fixed {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

JavaScript

let mobNav = document.getElementById('mob-nav');

window.addEventListener("scroll", function() {
  if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
    mobNav.classList.add('mob-nav-fixed');
  } else {
    mobNav.classList.remove('mob-nav-fixed');
  }
});