divを固定して静的にすることはできますか？

Question

私はdivといくつかのCSSを使って横向きのバーを作りたいので、ウェブページを下にスクロールすると、ユーザーがページをどのくらいスクロールしたかによって、バーの色が左から右に変わります。

バーは、常にページの上にとどまるように固定する必要があります。しかし、「position：fixed」を選択すると、要素はバーの後ろに消えます。一方、「position：static」を選択すると、下にスクロールするとバーが消えます。

バーが常にビューポートの上にあり、その背後に要素が消えないようにすることはできますか？

EDIT

は、これまでのところ私は、このソリューションを作ってみた：私は、同じ幅と高さを有する第2のdivを作成したが、「ポジション：静的」とし、「Zインデックス：-1」。

この2番目の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あなたが使用する必要があります（jQueryを使って）

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

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