HTML/CSS/JS 固定位置 div 不固定

Question

基本上，我正在编写一个网站并且我想实现一个 JQuery 进度条，我可以让它完美地出现在我的网站中，但是如果我开始使用 position:fixed; 滚动，位置会跳转到悬停 1/在页面的第 7 处，因此在向下滚动 7 次后，它已离开页面底部，当我将相同的 CSS 应用于已在此对象上使用的图像时，图像的行为正常。

此外，如果我向上滚动到顶部，进度条将永远不会完全到达它最初开始的位置。

这是jsfiddle。

HTML

<div id="progressbar"></div>

CSS

#progressbar {
position: fixed;
top:0;
left:0;
z-index:999;
width:100%;
height:20px;
}

我的代码有一个小提琴，但是 jQuery 脚本似乎没有出现，而且我没有使用足够的小提琴来让它正确显示，所以如果这是我错过的基本内容，如果也能指出来就好了。

Answer 1

您的进度条没有回到相同位置的原因是：

if (scroll <= 28) {
    progressbar.style.top = "30px";
}

你告诉它，一旦你滚动，如果到顶部的距离小于 28px，它应该从顶部到 30px，而它从 0 开始。即使你从向下滚动 1px 开始，它也会跳到 30px .