Header collapse on scroll(translate3d)

index.html

<style>
  .spacer {
    height: 2800px;
  }
  #test {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: red;
    transition: transform 200ms linear;
    backface-visibility: hidden;
    perspective: 1000;
  }
</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
      }

      if (scrollY > height) {
          target.style.transform = `translate3d(0, -${height}px, 0)`
          return
      }

      target.style.transform = `translate3d(0, -${scrollY}px, 0)`
      return false
    }
  }

  handleBarScroll('#test')
</script>