粘性定位滚动指示器被相对定位元素挤开的问题求助

大家好，我最近遇到了一个滚动指示器的问题，折腾好久都没解决，想请各位大佬帮忙看看：

我做了一个设置了position: sticky的滚动指示器，它的父元素直接放在body标签里。但当页面向下滚动，经过那些嵌套在main和section标签里的相对定位元素时，这个滚动指示器会被挤走，不再保持粘性定位的状态。

下面是相关的代码片段：

重置样式（reset.css） #

*, body { margin: 0; padding: 0; font-size: 1rem; }
*, *::before, *::after { box-sizing: border-box; }
a { text-decoration: none; color: inherit; }
ul, ol, li { list-style: none; }

滚动指示器CSS #

#scroller-container {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  height: 8px;
  background-color: var(--second-colour);
  z-index: 1000;
}

.scroller-bar {
  height: 100%;
  background: var(--main-colour);
  width: 0%;
}

滚动指示器HTML #

<div id="scroller-container">
  <div class="scroller-bar" id="jsBar"></div>
</div>

我已经尝试过这些方法，但都没搞定：

• 给相关元素加overflow-x属性：虽然能让滚动指示器保持粘性，但会破坏我写的JavaScript逻辑，导致其他功能异常
• 调整z-index值：不管怎么改，都没有效果

另外我刚发现一个奇怪的现象：在2K分辨率的显示器上，这个滚动指示器完全正常，但切换到1080P显示器时，滚动到页面的“Projects”区域附近，就会出现被挤走的问题。

内容来源于stack exchange