Calculate scroll position to show element when scrolling back

Question

As the title suggests, I want that when I scroll down my div disappears and immediately as I want to scroll to the top, my div reappears. I have sort of made it work but only when I reach a certain position rather than it taking effect immediately. I need help in calculating the position of the scroll hence the effect disappears and reappears immediately. Here is what I have tried so far:

window.addEventListener('scroll', function() {
  if (window.scrollY < 5) {
    document.getElementById('search-bar-scroll').classList.add('scrolled');
  } else {
    document.getElementById('search-bar-scroll').classList.remove('scrolled');
  }
});

* {
  margin: 0;
  padding: 0;
}

img,
fieldset {
  border: none;
}

body *,
*:after,
*:before {
  box-sizing: border-box;
}

html,
body {
  height: 250vh;
}

.main-wrapper {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.search-bar-scroll {
  background: #1e5da5;
  position: fixed;
  height: auto;
  width: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  transition: 0.3s ease;
}

.scrolled {
  opacity: 1;
  transition: 150ms all;
}

<div class="search-bar-scroll" id="search-bar-scroll">
  <fieldset class="home-header-search">
    <div action="#" id="scroll-input-container">
      <p>Hello World</p>
    </div>
  </fieldset>
</div>

Answer 1

EDIT.

I understand the question now. Try storing the last Y position of the scroll.

let lastScrollY = 0;
window.addEventListener('scroll', function(e) {
    if (window.scrollY == 0 || window.scrollY<lastScrollY) {
      document.getElementById('search-bar-scroll').classList.add('scrolled');
    } else {
      document.getElementById('search-bar-scroll').classList.remove('scrolled');
    }
    lastScrollY = window.scrollY;
});

* {
    margin: 0;
    padding: 0;
  }
  
  img,
  fieldset {
    border: none;
  }
  
  body *,
  *:after,
  *:before {
    box-sizing: border-box;
  }
  
  html,
  body {
    height: 250vh;
  }
  
  .main-wrapper {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .search-bar-scroll {
    background: #1e5da5;
    position: fixed;
    height: auto;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    transition: 0.3s ease;
  }
  
  .scrolled {
    opacity: 1;
    transition: 150ms all;
  }
  
  #header {
    background: #1e5da5;
    padding: 1rem;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 2;
  }

<div class="search-bar-scroll-container">
  <div class="search-bar-scroll scrolled" id="search-bar-scroll">
    <fieldset class="home-header-search">
      <div action="#" id="scroll-input-container">
        <p>Hello World</p>
      </div>
    </fieldset>
  </div>
</div>

Answer 2

Thank you to Brandon who helped with my answer which worked well, this answer is a response to a comment/suggestion by Rango to use the wheel event and it works like a charm!

Here's how I did it:

let scrollPosition = 0;
let scrollElement = document.getElementById("search-bar-scroll");

document.addEventListener("wheel", function(e) {
  if (e.deltaY > 0) {
    scrollElement.style.display = "none";
  } else {
    scrollElement.style.display = "block";
  }
});

* {
  margin: 0;
  padding: 0;
}

img,
fieldset {
  border: none;
}

body *,
*:after,
*:before {
  box-sizing: border-box;
}

html,
body {
  height: 150vh;
}

.main-wrapper {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.search-bar-scroll {
  background: #1e5da5;
  position: fixed;
  height: auto;
  width: 100%;
  left: 0;
  top: 0;
}

<div class="search-bar-scroll" id="search-bar-scroll">
  <fieldset class="home-header-search">
    <div action="#" id="scroll-input-container">
      <p>Hello World</p>
    </div>
  </fieldset>
</div>