負載 - VoidCC

-3

進度條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/

來源

2017-05-05 Klak031

好吧，它只是.progress元素繼承了父母的寬度，所以它在開始時爲100％，在css聲明中將其更改爲0 –

.progress {width：0％;}只需將此添加到您的css –

工作原理：）謝謝 – Klak031

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

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

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

來源

2017-05-05 10:58:41

0和0％是同一個東西@monas –

這就是我所說的;） – monas

-1

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

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

Edited Codepen

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

.progress { width: 0;}

將做的伎倆。

來源

2017-05-05 10:55:34 monas

如果仔細觀察，這會使「閃爍」效果在較慢的計算機上顯得更加明顯，初始狀態不應被JS用於更好的用戶體驗。 –

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

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

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

來源

2017-05-05 10:59:04 MikkelTN

負載

回答

相關問題