stroytest

by Павел KLON

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="header_container">

</div>

CSS

body{height: 3000px;padding-top: 103px;}
.header_container{
	background-color: green;
  height: 103px;
	margin-top: -103px;
  width: 100%;
}
.header_container.hide{top: -100px;}
.fixed.header_container{
	left: 0;
	margin-top: 0;
	top: -100px;
	position: fixed;
	width: 100%;
	z-index: 99;
}
	.header_container.fixed.active{top: 0;transition: top 5s linear;}

JavaScript

$(window).scroll(function() {
	var top = $(document).scrollTop();
	if (top < 10) $('.header_container').removeClass('hide');
	else $('.header_container').addClass('hide');
	if (top < 105) $('.header_container').removeClass('fixed active');
	else $('.header_container').addClass('fixed active');
});