如何在onscroll中正確使用addClass？

Question

我想創建一種效果，使頁面向下滾動並激活動畫。 我的動畫由css編寫，並給它一個類名'percent'。我的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時，類“ percent”將反復添加到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";
}