HTML结构问题：如何让JavaScript粒子动画在页面滚动时始终显示

看起来你的粒子动画只在页面第一屏可见，是因为它被嵌套在第一个section.intro里面，而且#particles的定位是relative——当页面滚动时，它会跟着第一个section一起移出视口。要让粒子动画始终作为背景显示在整个页面上，我们只需要调整它的定位和HTML结构即可：

步骤1：调整HTML结构 #

把#particles从第一个section中移出来，作为<body>的直接子元素，这样它可以独立于滚动内容存在：

<body>
  <!-- 把粒子容器移到滚动容器外面 -->
  <div id="particles"></div>
  
  <div class="container">
    <main role="main">
      <section class="intro">
        <header class="splash" id="splash" role="banner">
          <div id="intro">
          </div>
        </header>
      </section>
      <section class="AboutMe">
        <div class="introduction">
        </div>
      </section>
      <section class="box">
        <div class="projectContainer">
        </div>
      </section>
      <section class="Contact">
        <h2 class="ContactTitle">Contact</h2>
        <div class="contactLinks">
        </div>
      </section>
    </main>
  </div>
</body>

步骤2：修改CSS定位 #

将#particles设置为固定定位，让它始终覆盖整个视口，同时调整层级确保内容能显示在它上方：

#particles {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: fixed; /* 固定在视口，不随滚动移动 */
  top: 0;
  left: 0;
  z-index: -1; /* 把粒子层放在内容下方作为背景 */
}

.container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
  position: relative;
  z-index: 1; /* 确保滚动内容显示在粒子层上方 */
}

/* 其他原有CSS规则保持不变 */

步骤3：保持JavaScript不变 #

你的JavaScript代码不需要修改，因为它依然能通过getElementById('particles')正确找到容器元素，粒子动画会正常渲染到这个固定定位的容器中。

为什么这样有效？ #

• position: fixed会让#particles相对于浏览器视口固定，无论页面怎么滚动，它都会停留在视口范围内。
• z-index: -1确保粒子层不会遮挡页面内容，而container的z-index: 1让所有section内容都能正常显示在粒子背景之上。

这样调整后，粒子动画就会始终作为背景显示在整个页面中，不管你滚动到哪个section都能看到它啦！

内容的提问来源于stack exchange，提问作者Daniel V.