JS-double header shrink and remove on header

//HTML:
<div id="pagetop">
	header
	<div id="menu">Menu system</div>
</div>
//CSS:

#pagetop {
	position: fixed;
	top: 0;
	width: 100%;
	height: 120px;
	background-color: #06c;
	color: #fff;
	font-size: 23px;
	padding-top: 50px;
	transition: 0.4s all;
}
#pagetop > #menu {
	position: absolute;
	bottom: 0px;
	width: 100%;
	background: #004A95;
	height: 50px;
	transition: 0.4s all;
}
.dummy {
	padding-top: 170px;
}
//JS
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);