Могу ли я иметь фиксированный и статический одновременно?

Question

Я хочу сделать горизонтальную полосу с div и некоторым css, поэтому, когда я прокручиваю веб-страницу, панель меняет цвета слева направо в зависимости от того, насколько далеко пользователь прокрутил страницу.

Бар должен быть закреплен таким образом, чтобы он оставался всегда сверху страницы. Однако, когда я выбираю «position: fixed», элементы исчезают за планкой. С другой стороны, когда я выбираю «position: static», панель исчезает, когда я прокручиваю вниз.

Возможно ли, чтобы панель всегда была сверху окна просмотра и чтобы никакие элементы не могли исчезнуть за ней?

EDIT

До сих пор я пришел к этому решению: я создал второй DIV с той же ширины и высоты, но с «положением: статический» и «Z-индекс: -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) + '%'); 
});