sticky header pure javascript/css (no jquery)

javascript.js

/*paste this code in the footer*/
<script>
window.onscroll = function() {
	var el = document.getElementById('headerWrapper'); // rename with your header wrapper id
if(window.pageYOffset > 1) {
//sticky header 
el.classList.add("sticky");
} else {
//normal header 
el.classList.remove("sticky");
}

}</script>

style.css

/*Replace with your header wrapper #headerWrapper */
#headerWrapper {
	transition: all 0.4s ease;
}

#headerWrapper.sticky {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	padding-top: 10px;
	background: #fff;
}
/* replace with your logo class or improve efect*/
.sticky #logo {
	display: none;
}