JSFiddle - React, Tailwind, and code Playground

HTML

<div class='menu'>
  <div class='label'>Logo</div>
  <div>
   <span class="menu-item">item3</span>
   <span class="menu-item">item2</span>
   <span class="menu-item">item1</span>
   <span class="menu-item">item5</span>
  </div>
 </div>
 <div class="body"></div>

CSS

html,body {
  margin: 0;
  padding: 0;
}

.menu {
    position: fixed;
    top: 0;
    left: 40px;
    width: 200px;
    height: 300px;
}

.menu-item {
    display: block;
}

.label {
    background: green;
    min-height: 100px;
    transition: all 1000ms ease;
    overflow: hidden;
    height: 0;
}

.body {
    height: 200vh;
    background: olive;
}

.hidden {
    min-height: 0;
}

JavaScript

const label = document.querySelector('.label')
let hidden = false;
window.addEventListener("scroll",()=> {
    if(window.scrollY > 0 && !hidden) {
        label.classList.add('hidden')
        hidden = true
    } else if(window.scrollY === 0 && hidden) {
        label.classList.remove('hidden');
        hidden = false
    }
})