如何在网页向下滚动时添加CSS属性，滚动回顶部时取消该设置？

我们通过监听页面滚动事件判断滚动位置，动态给目标元素增删类名来切换样式即可，不需要修改你现有代码的原有结构。

1. 新增CSS样式 #

在你现有CSS代码末尾添加如下代码，你可以根据需求调整.active里的样式规则：

/* 滚动后激活的样式 */
.demo.active {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999; /* 防止被其他元素遮挡 */
}

如果你需要的是滚动后才显示绿色背景，可以把原有.demo选择器里的background-color属性改成默认样式，再在.active里新增background-color: #71ff05;即可。

2. 新增JavaScript代码 #

把这段代码放到你HTML文件的</body>标签之前即可生效：

document.addEventListener('DOMContentLoaded', function() {
  // 获取目标元素
  const demoElement = document.querySelector('.demo');
  // 监听页面滚动事件
  window.addEventListener('scroll', function() {
    // 获取当前滚动距离，兼容不同浏览器写法
    const scrollDistance = window.pageYOffset || document.documentElement.scrollTop;
    // 根据滚动距离切换类名
    demoElement.classList.toggle('active', scrollDistance > 0);
  });
});

可选优化 #

如果固定定位后下方内容被遮挡，可以在.wrap选择器里添加padding-top: 100px（和.demo的高度保持一致），避免内容跳动。

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