window.addEventListener("scroll",()=>{
const header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 0);
})
I know about .toggle() method but not so clearly. Would some one please explain about toggle() and window.scrollY?
Scroll Down. scrollY property of the Window interface returns the number of pixels that the document is currently scrolled vertically.
window.addEventListener("scroll", (event) => {
document.querySelector("h1").textContent = this.scrollY;
document.querySelector("h2").textContent = ("sticky", window.scrollY > 0);
})body {
width: 100vw;
height: 400vh;
}
h1 {
position: fixed;
top: 0;
}
h2 {
position: fixed;
top: 20%;
}<h1>0</h1>
<h2></h2>