backscroll

const menuSticky = () => {
    
    const body = document.body;
	const stickyMenu = document.querySelector(".wrapper-sticky-header"); // wrap your header with that
	
	const menuHeight  = stickyMenu.offsetHeight;
	stickyMenu.style.height = menuHeight + 'px';

    
	// const nav = document.querySelector(".page-header nav");
	// const menu = document.querySelector(".page-header .menu");
	const scrollUp = "scroll-up";
	const scrollDown = "scroll-down";
	let lastScroll = 0;

	window.addEventListener("scroll", () => {
		const currentScroll = window.pageYOffset;
		if (currentScroll <= 0) {
		  body.classList.remove(scrollUp);
		  return;
		}
	  
		if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
		  // down
		  body.classList.remove(scrollUp);
		  body.classList.add(scrollDown);
	
		} else if (
		  currentScroll < lastScroll &&
		  body.classList.contains(scrollDown)
		) {
		  // up
		  body.classList.remove(scrollDown);
		  body.classList.add(scrollUp);
		
		}
		lastScroll = currentScroll;
	  });

};

export default menuSticky;

backscroll-css

.scroll-down .wrapper-sticky-header {

  .main-header {
    transform: translateY(-100%)
  }
}


.wrapper-sticky-header {


  .main-header {
    background: #fff;
    position: fixed;
    z-index: 1;
    transition: all ease 400ms;
    width: 100%;
    padding: 12px;
    top: 0;
    left: 0;
    width: 100%;
  }
}

.scroll-up .wrapper-sticky-header {


  .main-header {
    box-shadow: 1px 2px 4px #00000012;
    transform: translateY(0)
  }
}

.scroll-up:not(.menu-open) .wrapper-sticky-header {
  background: var(--lightpurple);



  .main-header {}

}