Galera, tennho uma barra que funciona da seguinte forma, quando o meu scroll estiver em cima da div das barras elas vão começar a encher. eu fiz o css, mas não tô conseguindo fazer o Jquery, alguma dica?
HTML:
<label for="barra"><h2>HTML </h2><span id="porcentagemhtml"></span></label>
<div class="container-barra">
<div class="barra"></div>
</div>
<label for="barra"><h2>CSS </h2><span id="porcentagecss"></span></label>
<div class="container-barra">
<div class="barra"></div>
</div>
<label for="barra"><h2>JAVASCRIPT </h2><span id="porcentagemjs"></span></label>
<div class="container-barra">
<div class="barra"></div>
</div>
<label for="barra"><h2>PHP </h2><span id="porcentagemphp"></span></label>
<div class="container-barra">
<div class="barra"></div>
</div>
<label for="barra"><h2>SQL </h2><span id="porcentagemsql"></span></label>
<div class="container-barra">
<div class="barra"></div>
</div>
CSS:
.container-barra{
width: 100%;
border: 0.1px solid;
border-radius: 15px;
}
.barra{
width: 0%;
height: 20px;
background-color: black;
border-radius: 15px;
}
jQUERY:
$(document).scroll(function(){
var posicao = window.pageYOffset;
if(posicao>=1287){
setInterval(encheBarra, 30);
}
});
// Chamada da Função
function encheBarra(){
}