負載

Question

進度條100％，我試圖讓我的單頁網站進度條，一切工作正常，我多麼希望除了當頁面加載進度條是100％不爲0％，直到我開始滾動。這是我的代碼：

HTML

<div class="progressContainer"> 
    <div id="progress" class="progress"></div> 
</div> 

CSS

.progressContainer{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 10px; 
    background-color: rgba(0,0,0,0.65); 
} 

.progress{ 
    height: 10px; 
    background: #D66A00; 
    border-radius: 0; 
} 

的JavaScript

function updateProgress(num1, num2){ 
    var percent = Math.ceil(num1/num2 * 100) + '%'; 
    document.getElementById('progress').style.width = percent; 
} 

window.addEventListener('scroll', function(){ 
    var top = window.scrollY; 
    var height = document.body.getBoundingClientRect().height - window.innerHeight; 
    updateProgress(top, height); 
}); 

DEMO

https://codepen.io/Klak031/pen/xdXYgb/

Answer 1

就在CSS一個小故障可以做修復。添加width:0%您progress class，你是好去。

.progress{ 
    height: 10px; 
    background: #D66A00; 
    border-radius: 0; 
    width:0%; 
} 

這裏是更新codepen： https://codepen.io/anon/pen/mmBXXB

Answer 2

您需要準備好使用不同的功能。

$(document).ready(function(){ 
    updateProgress(0, 100); 
}); 

Edited Codepen

更新：其實也沒有必要做文檔準備好了，我的壞事情。設置

.progress { width: 0;} 

將做的伎倆。

Answer 3

如果你沒有設置你的進步類的寬度，將默認設置爲自動，並填寫父元素，在這種情況下， progressContainer類，其寬度爲100％。

.progress{ 
    height: 10px; 
    background: #D66A00; 
    border-radius: 0; 
    widht: 0; 
} 

我希望這有助於理解您的問題的解決方案。