<div class="wrapper">
  <div data-header class="header">
  <p>header</p>
</div>
<div class="main">
  <p>lorem ipsum</p>
  <p>lorem ipsum</p>
  <p>lorem ipsum</p>
  <p>lorem ipsum</p>
  <p>lorem ipsum</p>
  <p>lorem ipsum</p>
  <p>lorem ipsum</p>
  <p>lorem ipsum</p>
  <p>lorem ipsum</p>
</div>
</div>

.wrapper {
  margin-top: -50px;
}

.header {
  position: fixed;
  width: 100%;
  height: 70px;
  top: 0;
  left: 0;
  text-align: center;
  font-size: 25px;
  background: red;
  transition: transform .8s;
}

.header._hidden {
    transform: translateY(-90%);
  }
.main {
  padding-top: 75px;
  height: 800px;
}

	let lastScroll = 0;
	const header = document.querySelector('[data-header]');

	const scrollPosition = () => window.pageYOffset || document.documentElement.scrollTop;

const containHide = () => header.classList.contains('_hidden');
window.addEventListener('scroll', () => {
		if (scrollPosition() > lastScroll && !containHide()) {
			header.classList.add('_hidden');
		} else if (scrollPosition() < lastScroll && containHide()) {
			header.classList.remove('_hidden');
		}
})