我可以同时修复div和静态吗？

Question

我想制作一个带有div和一些css的水平条，所以当我向下滚动网页时，条形图会根据用户滚动页面的距离从左到右改变颜色。

应该固定条形图，使其始终位于页面顶部。但是，当我选择“position：fixed”时，元素会在条形图后面消失。另一方面，当我选择“position：static”时，当我向下滚动时，条形消失。

是否可以让条形图始终位于视口顶部并且不会有元素在其后面消失？

修改

到目前为止，我已经提出了这个解决方案：我创建了第二个具有相同宽度和高度的div，但是“position：static”和“z-index：-1”。

第二个div确保条形和元素不重叠。

我认为这是一个丑陋的解决方案，但不幸的是其他建议到目前为止还不起作用。

在：

后：

HTML：

<div class="loading_bar_horizontal_base"></div>
<div class="loading_bar_horizontal_base_static"></div>

CSS：

.loading_bar_horizontal_base {
  position: fixed;
  width: 100%;
  height: 5px;
  background-color: #ffe086;
}

.loading_bar_horizontal_base_static {
  position: static;
  width: 100%;
  height: 5px;
  z-index: -1;
}

Answer 1

这就是你要找的东西：

HTML

 <div class="header">
  <div class="progress">
  </div>
</div>

CSS

body {
  min-height: 700px;
  font-size: 90px;
  padding: 0; 
}

.header {
  height: 30px;
  background:black;
  width:100%;
  position: fixed;
  z-index: 10;
}

.progress {
  width: 10px;
  height: 26px;
  margin-top: 2px;
  background: red;
}

JS（使用JQuery）

var headerWidth = $('.header').width();
var progress = $('.progress');
var body = $('body');
body.on('scroll', function() {
    progress.width( (body.scrollTop() / body.height() * 100) + '%');
});