Sticky Header animate

by Vuthy Sok

HTML

<div class="wrapper">
	<div class="header_placeholder"></div>
	<header id="header"></header>
</div>

CSS

.wrapper {
  min-height:1000px;
}
#header {
    min-height: 85px;
    background-color: #fff;
    border-bottom: 8px solid #005bac;
    position: relative;
}
#header .is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

JavaScript

(function(){
	var stickyHeader = {
		onReady: function () {
			this.doScroll();
		},
		doScroll:function() {
			$(window).scroll(function () {
				stickyHeader.doSticky();
			});
		},
		doSticky: function () {
			var $header = $('#header'),
			headerHeight = $header.height(),
			window_y = $(window).scrollTop();

			if (window_y > headerHeight) {
				if (!$header.hasClass('is-sticky')) {
					$('.header_placeholder').height(headerHeight);
					$header.addClass('is-sticky').css('top', -headerHeight)
					.animate({
						'top': 0
					},300);
				}
			} else {
				if ($header.hasClass('is-sticky')) {
					$('.header_placeholder').height(0);
					$header.removeClass('is-sticky');
				}
			}
		}
	}
  $(document).ready(function(){
  		stickyHeader.onReady();
  });
})(jQuery);