Как добавить класс в тег хтмл при скроле? [требует правки]

window.onscroll = function() { 
  var scrollTop = window.pageYOffset, 
      obj_cap = document.querySelector('.cap'); 
   
  if( scrollTop >= 100 ){ 
    obj_cap.classList.add('cap__bg--all'); 
  }else{ 
    obj_cap.classList.remove('cap__bg--all'); 
  }; 
};

body {height: 1000px;} 
 
.cap { 
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  padding: 10px; 
  background-color: rgba(0,0,0,0.3); 
  color: white; 
  transition: background-color 0.5s; 
} 
 
.cap__bg--all { 
  background-color: rgba(0,0,0,0.8); 
}

<div class="cap">Наша шапочка :3</div>