fade out element if scroll position to top is < 10px. without jquery, but with vanilla js
// get the element, and scroll position var scrollpos = window.scrollY; var header = document.getElementById("mainHeader"); // add scroll event listner window.addEventListener('scroll', function(){ // get new scroll position var scrollpos = window.scrollY; // get clientHeight, which is the height of the element var height = header.clientHeight; // if the scroll position is less than 10, add class .fadedout, else remove class .fadedout if(scrollpos > height){ header.classList.add("fadeOut"); } else { header.classList.remove("fadeOut"); } })