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

负载

回答

相关问题