请解释window.scrollY > 0的含义及classList.toggle()方法的用法

1. window.scrollY是什么？ #

window.scrollY是浏览器提供的只读属性，用于获取当前页面垂直方向滚动的像素距离：

• 当页面处于顶部、没有滚动时，它的取值为0
• 一旦向下滚动页面，取值会大于0，滚动距离越远，数值越大

2. classList.toggle()的两种用法 #

classList.toggle()是操作DOM元素类名的方法，有两种使用方式：

无第二个参数的基础用法 #

element.classList.toggle('类名')：实现类名的切换——元素已有该类名则移除，没有则添加。

带第二个参数的强制控制用法 #

element.classList.toggle('类名', 布尔值)：第二个布尔参数决定类名的添加/移除：

• 当参数为true时，强制给元素添加该类名（不管之前有没有）
• 当参数为false时，强制移除元素的该类名（不管之前有没有）

结合你的代码分析 #

window.addEventListener("scroll",()=>{
const header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 0);
})

这段代码的作用是监听页面滚动事件，实时控制<header>元素的sticky类：

• 当页面向下滚动（window.scrollY > 0为true），给<header>添加sticky类（通常用来实现头部固定在顶部的效果）
• 当页面回到顶部（window.scrollY > 0为false），移除<header>的sticky类，恢复头部原本的状态

内容的提问来源于stack exchange，提问作者Hasib