why I can't add class to div on scroll using this code in Javascript.I searched on google but i can find it only by jquery which I dont understand.
var pbar = document.getElementsByClassName("bar_ani");
window.onscroll = function () {
if (window.scrollY > 20) {
pbar.classList.add("animate-scroll");
}
}.animate-scroll{
animation: progress 0.5s ease linear;
}
@keyframes progress {
from{
width: 0%;
}
}<div class="progress">
<div class="progress_bar bar_ani" role="progressbar" style="width: 90%;background-color:cyan" aria-valuenow="70" aria-valuemin="0" aria-valuemax="70">
</div>
</div>strong text
document.getElementsByClassName("bar_ani")
returns an array, so you should use pbar[0].classList.add() instead of pbar.classList.add().