(function() {
var activateEl = $('div.activate'),
activateElOffset = activateEl.offset().top / 2,
documentEl = $(document);
documentEl.on('scroll', function() {
if (documentEl.scrollTop() > activateElOffset) {
activateEl.each(function() {
$(this).css("width", $(this).data("percent"));
});
}
});
})();
p {
height: 800px;
}
#skillbar div {
background: #05103a;
color: white;
width: 10%;
transition: 2s;
border-radius: 5px;
text-indent: 5px;
white-space: nowrap;
}
.bar {
background: #e6e6e6;
width: 100%;
margin-bottom: 5px;
margin-left: 0;
border-radius: 5px;
border: 2px solid #e6e6e6;
}
#skillbar {
margin-left: 15%;
margin-right: 15%;
padding: 10px;
}
<p></p>
<section id="skillbar">
<div class="bar">
<div class="activate" data-percent="90%" style="transition-timing-function: linear;">C++</div>
</div>
<div class="bar">
<div class="activate" data-percent="100%" style="transition-timing-function: ease;">C#</div>
</div>
<div class="bar">
<div class="activate" data-percent="50%" style="transition-timing-function: ease-in;">Java</div>
</div>
<div class="bar">
<div class="activate" data-percent="100%" style="transition-timing-function: ease-out;">HTML</div>
</div>
<div class="bar">
<div class="activate" data-percent="50%" style="transition-timing-function: ease-in-out;">CSS</div>
</div>
<div class="bar">
<div class="activate" data-percent="20%" style="transition-timing-function: ease;">JavaScript</div>
</div>
<div class="bar">
<div class="activate" data-percent="50%" style="transition-timing-function: ease-out;">SQL</div>
</div>
<div class="bar">
<div class="activate" data-percent="30%" style="transition-timing-function: ease-out;">CISCO</div>
</div>
<div class="bar">
<div class="activate" data-percent="10%" style="transition-timing-function: linear;">Python</div>
</div>
<div class="bar">
<div class="activate" data-percent="80%" style="transition-timing-function: ease-in-out;">Microsoft Office</div>
</div>
<div class="bar">
<div class="activate" data-percent="40%" style="transition-timing-function: ease;">GIMP</div>
</div>
</section>
<p></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I'm doing a skills bar graph, which activate on scrolling. I wanna insert it into my page, so i have to use an id on that section, but if i use #skillbar div{...} instead of div{...} it is collapse and doesn't work, and i really dont understand why.
That style should to be on all divs inside the #skillbar section, and if i know right, with space between the two element i select that relation. So what's wrong with it?