-1

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

Ashutosh Mishra
  • 9
  • 1

1 Answers1

0
document.getElementsByClassName("bar_ani")

returns an array, so you should use pbar[0].classList.add() instead of pbar.classList.add().

Berkay G.
  • 151
  • 1
  • 9