负载
进度条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
就在CSS一个小故障可以做修复。添加width:0%
您progress class
,你是好去。
.progress{
height: 10px;
background: #D66A00;
border-radius: 0;
width:0%;
}
这里是更新codepen: https://codepen.io/anon/pen/mmBXXB
0和0%是同一个东西@monas –
这就是我所说的;) – monas
您需要准备好使用不同的功能。
$(document).ready(function(){
updateProgress(0, 100);
});
更新:其实也没有必要做文档准备好了,我的坏事情。设置
.progress { width: 0;}
将做的伎俩。
如果仔细观察,这会使“闪烁”效果在较慢的计算机上显得更加明显,初始状态不应被JS用于更好的用户体验。 –
如果你没有设置你的进步类的宽度,将默认设置为自动,并填写父元素,在这种情况下, progressContainer类,其宽度为100%。
.progress{
height: 10px;
background: #D66A00;
border-radius: 0;
widht: 0;
}
我希望这有助于理解您的问题的解决方案。
好吧,它只是.progress元素继承了父母的宽度,所以它在开始时为100%,在css声明中将其更改为0 –
.progress {width:0%;}只需将此添加到您的css –
工作原理: )谢谢 – Klak031