固定位置 - 設置寬度等於容器

Question

我一直試圖設置一個div的位置，以便在用戶滾動得足夠長時固定。我注意到，當div的位置設置爲fixed時，寬度與父元素的寬度不同。我怎樣才能保持與位置的div的寬度：固定相同的父元素？

在這個例子中，我希望底部div的寬度與黃色框的位置相同：fixed被設置。

http://jsfiddle.net/BYJPB/

這裏是我的HTML：

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

這裏是我的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%; 
} 

這裏是我的JavaScript：

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

Answer 1

更新您的JS，我不明白喲你的要求，但我認爲這是你在找什麼。

if (scrollTop > 150) { 
    $toolbar.css({ 
     'position' : 'fixed', 
     'top' : 0, 
     'width':$header.width() 
    }); 

    $header.addClass('prog'); 
} 
else { 
    $toolbar.css({ 
     'position' : 'static', 
     'top' : 0 
    }); 
    $header.removeClass('prog'); 
}