jQuery to show/hide header in a fashion similar to medium.com

jQueryShyHeader.css

.shy-header {
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    height: 91px;
    z-index:9999;
}

jQueryShyHeader.js

// Shy Header 
$(document).ready(function() {

	// Create shy header Element
	$(document.body).append('<div class="shy-header"></div>');

	// Declare Vars
	var header = $('header'),
		shyHeader = $('.shy-header'),
		lastScrollPosition = 0;

	// Hide shy header
	shyHeader.hide();

	// Make header shy/confident on scroll
	$(window).scroll(function() {

		var newScrollPosition = window.scrollY;

		if ($(document).scrollTop() > 150) {
			shyHeader.show();
			// Show header when mouse enters shy header
			shyHeader.mouseenter(function() {
				header.removeClass('is-hidden');
				shyHeader.hide();
			});

			// Hide header when mouse leaves header
			header.mouseleave(function() {
				header.addClass('is-hidden');
				shyHeader.show();
			});

			if ($(window).scrollTop() + $(window).height() > $(document).height() - 150) {
				header.removeClass('is-hidden');
				shyHeader.hide();
			} else {
				if (newScrollPosition < lastScrollPosition) {
					header.removeClass('is-hidden');
					shyHeader.hide();
				} else {
					header.addClass('is-hidden');
					shyHeader.show();
				}
				lastScrollPosition = newScrollPosition;
			}
		} else {
			shyHeader.hide();
			shyHeader.unbind('mouseenter');
			header.unbind('mouseleave');
		}

	});
});