如何在页面加载及滚动时动态修改div元素的定位位置

我在页面某元素下方放置了一个顶部栏div，需要实现以下交互效果：

• 页面加载完成时，该div的top属性值为50px
• 当用户滚动页面时，由于页面同时存在sticky粘性头部，该div的top属性值需动态切换为175px

目前编写的代码运行效果始终不符合预期。

效果对比 #

• 页面加载时实际运行效果：
  
• 页面加载时预期效果：
  

当前错误实现代码 #

window.onscroll = function () { scrollFunction() };

function scrollFunction() {
   if (!document.body.scrollTop > 1 || document.documentElement.scrollTop > 1 ) {
       document.getElementById("bar").style.top = "90px";
  }else{
       document.getElementById("bar").style.top = "175px";
  }
}

你的代码存在3个核心问题：

1. 逻辑判断优先级错误：!document.body.scrollTop > 1会先对滚动值取反得到布尔值，再和数字1比较，完全不符合判断意图；且不同浏览器的滚动距离挂载对象不同，判断逻辑没有做兼容
2. 初始状态缺失：页面加载完成后如果用户没有触发滚动，滚动回调函数不会执行，bar元素的初始top值不会被JS设置，达不到初始50px的要求
3. 参数值写错：非滚动状态下你写的top值是90px，和需求要求的50px不匹配

修正后的完整代码如下：

// 页面DOM加载完成后先初始化元素状态
document.addEventListener('DOMContentLoaded', function() {
  const bar = document.getElementById("bar");
  // 设置初始top值
  bar.style.top = "50px";

  // 绑定滚动事件
  window.addEventListener('scroll', function() {
    // 兼容不同浏览器的滚动距离获取
    const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    // 发生滚动就切换为适配sticky头部的top值，回到顶部就恢复初始值
    bar.style.top = scrollTop > 0 ? "175px" : "50px";
  })
})

如果切换时有生硬跳变，可以给bar元素加简单的过渡优化体验：

#bar {
  /* 必须确保bar设置了定位属性，否则top不生效 */
  position: fixed;
  transition: top 0.2s ease;
  /* 其余原有样式保留 */
}

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