javascript - 如何在 onscroll 中正确使用 addClass？

Question

我想创建我的页面向下滚动并激活动画的效果。我的动画由 css 编写并给它一个类名“百分比”。我的 javascript 如下：

   <script type="text/javascript">
    //onscroll
     window.onscroll = function(){
        var t = document.documentElement.scrollTop || document.body.scrollTop; 
        var set = document.getElementById( "bar1" );
             if( t >= 600 ) {
        set.className = set.className +"percent";

    }
}
   </script>

我的问题是当我的页面滚动超过 600 时，“百分比”类将被重复添加到 bar1，例如，

 p class="percentpercentpercent... id="bar1"

我该怎么办？有什么建议么 ？

Answer 1

首先检查它是否具有类 (set.classList.contains('percent'))，如果没有，则仅添加

<script type="text/javascript">
    //onscroll
     window.onscroll = function(){
        var t = document.documentElement.scrollTop || document.body.scrollTop; 
        var set = document.getElementById( "bar1" );
             if( t >= 600 and !set.classList.contains('percent')) {
        set.className = set.className +" percent";

    }
}
   </script>

Answer 2

当您滚动超过 600 像素时，“百分比”会附加到自身上。尝试设置一次。

if( t >= 600){
  set.className == "percent" || set.className = "percent";
}

Answer 3

添加类之前检查：

if((set.className).indexOf("percent") == -1){
    set.className = set.className +"percent";
}