嗨，我正在学习html/css和javascript，我想我的html结构有问题。基本上，我想做的是，我的粒子动画在滚动页面时保持在网站上。我有一个Javascript文件，它执行getElementById("articles"(来在div上运行画布，但它只停留在第一页。
我试着把"；粒子"；div作为主div，它将包含所有部分，但它不起作用。
如果有人感兴趣，下面是文件的存储库：https://github.com/DanielVillacis/DanielVillacis.github.io
这是我的html结构：
document.addEventListener('DOMContentLoaded', function() {
particleground(document.getElementById('particles'), {
dotColor: '#FFFFFF',
lineColor: '#FFFFFF'
});
var intro = document.getElementById('intro');
intro.style.marginTop = -intro.offsetHeight / 2 + 'px';
}, false);html,
body {
width: 100%;
height: 100vh;
}
canvas {
display: inline-block;
vertical-align: baseline;
}
header,
section {
display: block;
}
#particles {
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
}
.container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
section {
height: 100vh;
width: 100%;
display: inline-block;
scroll-snap-align: start;
}<body>
<div class="container">
<main role="main">
<section class="intro">
<div id="particles">
<header class="splash" id="splash" role="banner">
<div id="intro">
</div>
</header>
</div>
</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>使用CSSposition: fixed;属性。
将位置设置为固定后，画布将相对于视口进行定位，因此即使在滚动时也会保持不变。
.pg-canvas {
display: block;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
width: 100%;
height: 100vh;
}您已经将粒子(显示在画布上(放入一个将滚动出视图的部分。
您正在使用的粒子库将此画布放置在您给定的具有id粒子的元素之前。
您可以通过将position: fixed添加到样式表中的画布选择器来仅修复画布(注意是否有其他画布可以提供更明确的选择器(。
在许多情况下，这将用于将带有粒子的画布固定到视口。但请注意MDN 的描述
元素从正常文档流中删除，并且没有空格为页面布局中的元素创建。它是相对定位的到视口建立的初始包含块，除了当它的祖先之一具有变换、透视或过滤器时属性设置为none以外的值(请参阅CSS TransformsSpec(，在这种情况下，祖先表现为包含块。(请注意，浏览器与透视图和有助于容纳块体形成的过滤器。(其最终位置由top、right、bottom和left的值确定。
你现在还可以，因为你用顶部移动了介绍，但如果那是翻译，你就必须把画布从介绍中去掉。