JavaScript
<script>
document.addEventListener('scroll', function(e) {
var header = document.getElementById('sticky-header');
var scrollTop = window.scrollY || document.documentElement.scrollTop;

if (scrollTop > lastScrollTop) {
// Scroll Down
header.style.transform = 'translateY(-100%)';
} else {
// Scroll Up
header.style.transform = 'translateY(0)';
}
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
}, false);

var lastScrollTop = 0;
</script>

CSS
#sticky-header {
transition: transform 0.3s ease-in-out;
}