页面滚动navbar隐藏时，如何将progress bar div固定在顶部？

问题分析 #

你遇到的核心问题是：页面滚动导致Navbar移出视口后，Progress Bar无法固定到顶部。之前尝试的position: fixed无效，大概率是没处理好固定后的位置对齐逻辑，或是缺少滚动状态的监听控制，父元素的flex布局也可能间接影响了定位效果。

方案一：纯CSS用position: sticky（最简单） #

sticky定位能让元素滚动到指定位置时自动固定，无需JS。只需修改Progress Bar的CSS：

#progress-bar {
  margin-top: 40px;
  width: 80%;
  background-color: rgb(104, 171, 230);
  height: 200px;
  /* 新增以下属性 */
  position: sticky;
  top: 0; /* 元素顶部碰到视口顶部时触发固定 */
  z-index: 100; /* 确保在其他内容上方 */
}

注意：

• 父元素#profile-main不能设置overflow: hidden（你的代码里未设置，符合要求）
• 若要等Navbar完全消失后再固定，可把top值设为Navbar的高度（比如Navbar高度约80px，就设top: 80px），按需调整即可。

方案二：JS监听滚动+动态固定（精准控制） #

如果需要严格在Navbar消失后才固定Progress Bar，用JS监听滚动状态更可靠：

1. 新增CSS固定样式和占位元素样式：

.progress-fixed {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* 保持水平居中，和原80%宽度对齐 */
  width: 80%;
  z-index: 100;
}

/* 占位元素：解决固定后内容跳动问题 */
#progress-bar-placeholder {
  height: 200px; /* 和Progress Bar高度一致 */
  width: 80%;
  display: none;
}

2. 修改HTML添加占位元素：

<div id="progress-bar">
  bar
</div>
<!-- 新增占位元素 -->
<div id="progress-bar-placeholder"></div>
<div id="main-content">
  main content
</div>

3. 添加JS滚动监听逻辑：

const navbar = document.getElementById('navbar');
const progressBar = document.getElementById('progress-bar');
const placeholder = document.getElementById('progress-bar-placeholder');

// 计算Navbar完全移出视口的滚动阈值
const navbarBottom = navbar.offsetTop + navbar.offsetHeight;

window.addEventListener('scroll', () => {
  if (window.scrollY >= navbarBottom) {
    progressBar.classList.add('progress-fixed');
    placeholder.style.display = 'block'; // 显示占位元素避免内容跳动
  } else {
    progressBar.classList.remove('progress-fixed');
    placeholder.style.display = 'none';
  }
});

为什么之前的fixed无效？ #

直接用fixed但未设置left/right和居中逻辑，会导致元素位置偏移；另外固定后原位置会空出，引发下方内容跳动，这也是需要占位元素的原因。

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