Calculate scroll position to show element when scrolling back

December 23, 2022

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 < 50) {
      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;
  }
  
  #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" id="search-bar-scroll">
    <fieldset class="home-header-search">
      <div action="#" id="scroll-input-container">
        <p>Hello World</p>
      </div>
    </fieldset>
  </div>
</div>

>Solution :

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>