Show sticky header when start to scrollup

header.html

<div id="page" class="site">
  <header id="masthead" class="site-header" role="banner"></header>
</div>

sticky-header.js

var didScroll,
lastScrollTop = 0,
scrollDelta = 20,
header = $('#masthead'),
headerHeight = header.outerHeight(),
scrollClass = 'is-scrolling-down'
$(window).scroll(function(event){
	didScroll = true;
});
setInterval(function() {
	if (didScroll && $(window).width() <= '767') {
		hasScrolled();
		didScroll = false;
	}
}, 500);
function hasScrolled() {
	var st = $(this).scrollTop();
	// Make sure they scroll more than delta
	if (Math.abs(lastScrollTop - st) <= scrollDelta)
		return;
	// If they scrolled down and are past the navbar, add class scrollClass.
	// This is necessary so you never see what is "behind" the navbar.
	if (st > lastScrollTop && st > headerHeight) {
		// Scroll Down
		if (!header.hasClass(scrollClass)) {
			header.addClass(scrollClass);
		}
	} else {
		// Scroll Up
		if (st + $(window).height() < $(document).height()) {
			if (header.hasClass(scrollClass)) {
				header.removeClass(scrollClass);
			}
		}
	}
	lastScrollTop = st;
}

sticky.scss

// Sticky header
#page {
	padding-top: 110px; // height of header
	@extend %transition;
}
.site-header {
	position: fixed;
	top: 0;
	height: 110px;
	transition: transform 0.2s ease-in-out;
	z-index: 500;
	transform: translateY(0);
}
.is-scrolling-down {
	transform: translateY(-100%);
}