JS-On-scroll-header-shrink and add class

// header shrink
HTML:
		<div class="header" id="header-shrink">
			<h2>Header</h2>
		</div>
//CSS:
.header {
	height: 120px;
	background-color: orange;
	margin-bottom: 30px;
	display: table;
	width: 100%;
	position: fixed;
	top: 0;
	transition: 0.4s all;
	max-width: 1170px;
	margin: 0 auto;
}
.body_content {
	margin-top: 170px;
}
.header h2 {
	text-align: center;
	text-transform: uppercase;
	font-size: 50px;
	color: #fff;
	margin: 0px;
	display: table-cell;
	vertical-align: middle;
}
h2 {
	text-align: center;
	transition: 0.4s all;
}
.custom-shrink h2 {
	font-size: 30px;
}
//Javascript

var headerShrink, headerShrinkyPos;
function headerShrink() {
	headerShrink = document.getElementById('header-shrink');
	headerShrinkyPos = window.pageYOffset;
	if(headerShrinkyPos > 150){
		headerShrink.style.height = "50px";
		headerShrink.classList.add('custom-shrink');
	} else {
		headerShrink.style.height = "120px";
		headerShrink.classList.remove('custom-shrink');
	}
}
window.addEventListener("scroll", headerShrink);