Header scroll page

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Header shrink after scroll</title>
		<style media="screen">
			body{margin: 0; text-align: center; background: #6fdc6f;}
		#pagetop {position: fixed; top: 0px; width: 100%;height: 120px; background: #32cd32; color: white; padding: 20px; transition: height 0.3s linear 0s; overflow: hidden;}
		#pagetop > #menu {
			position: absolute; bottom: 0px; left: 0px; width: 100%; background: #238f23; height: 50px; transition: height 0.3s linear 0s;
		}
		.wrapper {margin-top: 230px}
		</style>
		<script type="text/javascript">

		var pagetop, menu, yPos;
			function yScroll() {
				pagetop = document.getElementById('pagetop');
				menu = document.getElementById('menu');
				yPos = window.pageYOffset;
				if(yPos > 150) {
					pagetop.style.height = "36px";
					pagetop.style.paddingTop = "8px";
					menu.style.height = "0px";
				}
				else {
					pagetop.style.height = "120px";
					pagetop.style.paddingTop = "50px";
					menu.style.height = "50px";
				}
			}
			window.addEventListener('scroll', yScroll);

		</script>
	</head>
	<body>
		<div id="pagetop">
			Header
			<div id="menu">
				Menu here
			</div>
		</div>
			<div class="wrapper">
				<script type="text/javascript">
					for(var i = 0; i < 60; i++){
						document.write("<h1>"+ (i+1) +".This dummy text... </h1>");
					}
				</script>
			</div>
	</body>
</html>