JSFiddle - React, Tailwind, and code Playground

by Arturo Gallegos

HTML

<nav id="main-menu">
  <ul>
    <li><a href="#">Lorem.</a></li>
    <li><a href="#">Consequatur.</a></li>
    <li><a href="#">Repellat?</a></li>
    <li><a href="#">Voluptates?</a></li>
  </ul>
</nav>
<main>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque aperiam unde, eos ducimus, optio voluptatum! Incidunt, delectus in unde minima, voluptates officia asperiores corporis natus voluptate necessitatibus enim dignissimos laudantium perspiciatis? Delectus soluta deserunt, velit quia est, aliquam necessitatibus similique molestias ipsa debitis magnam nesciunt assumenda. Nihil qui ullam at assumenda quae eligendi error nam corporis repellat soluta minima, modi cum accusantium delectus labore. Officia amet deserunt dolorum eius incidunt, quibusdam deleniti doloribus dolore in recusandae numquam molestiae magni mollitia quod repellendus ex quisquam ut facere sunt libero id asperiores? Accusantium quam dolor minima fugiat ratione magni blanditiis, possimus vero, repudiandae ut deserunt debitis suscipit expedita tempore necessitatibus veritatis consequatur harum. Eum ratione, modi aliquam eveniet totam ipsam excepturi adipisci architecto aspernatur, fugiat eius maiores, dolorem facere placeat minus veniam! Adipisci ipsa aliquam eaque omnis aliquid qui necessitatibus laboriosam cumque quaerat neque molestias, perferendis cupiditate doloremque repudiandae, voluptate minima corporis.</p>
  <p>Soluta dicta, quos optio atque praesentium, quibusdam consectetur distinctio, nam et illum similique. Similique consequuntur ipsum, molestias reprehenderit maxime tenetur. Eius quos accusantium velit, enim nostrum voluptatibus, eum, incidunt aliquam molestiae provident obcaecati cupiditate vel placeat vitae! Possimus ea natus repellat! Nam libero, quos aspernatur veniam nisi voluptatum voluptas error consequuntur vero doloribus laudantium veritatis debitis, ducimus, dolorem eum. Eius necessitatibus inventore minima illum odio tempore sint, nulla voluptatem nesciunt...

SASS

nav
  padding: 0 30px
  margin: 0
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 50px
  transition: 0.5s
  background: transparent
  &.hide
    top: -50px
  &.bg
    background: #333
    li
      a
        color: #fff
  li
    display: inline-block
    a
      display: block
      font: 14px/50px arial,verdana,tahoma
      color: #036
      text-decoration: none
      padding: 0 10px
main
  font: 14px/1.4 arial,verdana,tahoma
  color: #444
  padding: 50px 30px 30px
  box-sizing: border-box
  p
    margin-bottom: 30px

JavaScript

let position = 0;
window.addEventListener('scroll', function(){
console.log(this.scrollY);
	if(this.scrollY < 1){
  	document.getElementById('main-menu').classList.remove('bg');
  }else{
  	document.getElementById('main-menu').classList.add('bg');
  }
	if(this.scrollY > 200 && this.scrollY > position){
  	document.getElementById('main-menu').classList.add('hide');
  }else{
  	document.getElementById('main-menu').classList.remove('hide');
  }
  position = this.scrollY;
})