Can I have a div fixed and static at the same time?

Question

I want to make a horizontal bar with a div and some css, so when I scroll down the webpage, the bar changes colors from left to right depending on how far the user scrolled the page.

The bar should be fixed, such that it stays always on top of the page. However, when I select "position: fixed", the elements disappear behind the bar. On the other hand, when I select "position: static", the bar disappears, when I scroll down.

Is it possible to have the bar always on top of the viewport AND such that no elements can disappear behind it?

EDIT

So far I've come up with this solution: I created a second div with the same width and height but with "position: static" and "z-index: -1".

This second div makes sure, that the bar and the elements don't overlap.

I think it's an ugly solution, but unfortunately the other suggestions didn't work so far.

Before:

After:

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

Possible duplicate of: http://stackoverflow.com/questions/18894400/fixed-position-div-scrollable — Cagy79, Feb 21 '17 at 13:15
@Eamonn: I've reset the z-index of all elements to 0, but the elements still disappear behind it — de_dust, Feb 21 '17 at 13:15
What about the z-index of your bar? Set it higher than the others. — Eamonn, Feb 21 '17 at 13:16
@Eamonn: I've set the z-index of all elements to 0 and the z-index of the bar to 1. The bar still floats in front of everything. I want the bar to be like an extension of the browser, such that the "real" viewport starts below it. — de_dust, Feb 21 '17 at 13:19
@Eamonn: No, it should be like this: First comes the bar. It stays always at the top of the viewport (like position: fixed). However, it should be impossible for any element, to be hidden behind the bar (like position: static). Basically, it should be just like position: static, with the "extension" to stay on top when I scroll down the page. — de_dust, Feb 21 '17 at 13:24
@Eamonn: You can think of it like the url bar of the browser: It stays always on top when you scroll the page, and no html elements can hide behind it. — de_dust, Feb 21 '17 at 13:28
And the problem with fixed is things slide up behind it by default? — Eamonn, Feb 21 '17 at 13:30
If that's the case, make it `display:fixed` and add padding to the `body` equal to the height of your bar. — Eamonn, Feb 21 '17 at 13:30

score 0 · Answer 1 · answered Feb 21 '17 at 13:50

This is what you are looking for:

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 (With JQuery)

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

Can I have a div fixed and static at the same time?

1 Answers1