javascript - 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;
}

我的代码有一个 fiddle ，但是 jQuery 脚本似乎没有出现，而且我还没有充分使用 fiddle 来让它正确显示，所以如果这是我错过的基本内容，如果也能指出来，那就太棒了。

Answer 1

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

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

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