I've been experimenting with setting a div's position to fixed once a user has scrolled a certain distance. I've run into an issue where the fixed position div's width doesn't match its parent element. How can I ensure that the fixed position div maintains the same width as the parent element?
For instance, in this scenario, I would like the bottom div to have the same width as the yellow box when position: fixed is applied.
You can view an example of this issue at http://jsfiddle.net/BYJPB/
Below is the HTML code I am working with:
<header>
<div class="filler-space">
Filler Space
</div>
<div class="toolbar">
<div class="current-article">
<div class="progress-bar"></div>
My article
</div>
</div>
</header>
And here is the corresponding CSS:
body {
padding:0 10px;
height: 1000px;
}
.filler-space {
background-color: yellow;
border:1px solid #000000;
height: 140px;
}
.toolbar {
border: 1px solid black;
}
.current-article {
font-weight: 600;
height: 100%;
line-height: 40px;
overflow: hidden;
width: 100%;
z-index: -1;
}
.progress-bar {
position: absolute;
}
.prog .progress-bar {
background: none repeat scroll 0 0 #F2F4F7;
bottom: 0;
height: 100%;
left: 0;
margin: 0 -10px 0 -10px;
overflow: hidden;
right: 0;
top: 0;
transition: width 0.1s ease 0s;
z-index: -1;
width: 100%;
}
Finally, here is the JavaScript code I am using:
var $toolbar = $('.toolbar');
var $window = $(window);
var $header = $('header');
$(document).scroll(function() {
var scrollTop = $window.scrollTop();
if ( scrollTop > 150) {
$toolbar.css({
'position' : 'fixed',
'top' : 0
});
$header.addClass('prog');
}
else {
$toolbar.css({
'position' : 'static',
'top' : 0
});
$header.removeClass('prog');
}
});