add this block to page footer

<script>
	//remove or comment this code block to disable function
	window.onscroll = function() {scrollFunction()};

		function scrollFunction() {
		if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
			document.getElementById("header").style.padding = "15px 0";
			document.getElementById("header").style.background = "#7FAF41";
			document.getElementById("navdiv").style.padding = "15px 0 0 0";
			document.getElementById("logodiv").style.width = "10%";
			

		} else {
			document.getElementById("header").style.padding = "40px 0";
			document.getElementById("header").style.background = "transparent";
			document.getElementById("navdiv").style.padding = "30px 0 0 0";
			document.getElementById("logodiv").style.width = "14.40%";
		}
		}
</script>

then add a transition effect for the header. don't forget to set header position to fixed, it's width to 100%, & top value to 0