Header collapse on scroll(transition)

index.html

<style>
  .spacer {
    height: 2800px;
  }
  #test {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: red;
    transition: top 60ms linear;
  }
</style>

<div id="test"></div>
<div class="spacer"></div>

<script>
  const handleBarScroll = (selector) => {
    const target = document.querySelector(selector)
    const { height } = target.getBoundingClientRect()

    window.onscroll = () => {
      const scrollY = window.scrollY

      if (scrollY <= 0) {
        target.removeAttribute('style')
        return false
      }

      if (scrollY > height) {
        target.style.top = `-${height}px`
        return false
      }

      target.style.top = `-${scrollY}px`
      return false
    }
  }

  handleBarScroll('#test')
</script>