I'm building a personal website and I want to make my navigation to shrink after I scroll down. The website consists of 4 divs with 100% height. Right now I am using a JS, that is shrinking the navigation after 300px scroll:
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller");
} else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();
</script>
My question is how to make the navigation to shrink after the first div?