javascript - 使用 javascript 切换类

Question

你好，我想在用户向下滚动时针对 div 的不透明度，并在他再次向上滚动时将其删除。这就是我到目前为止得到的代码。它有效，但我不明白为什么我必须再次循环它在 esle 条件下，或者他们是更好的方法。请只使用 javascript，不要使用 jquery。非常感谢。

window.addEventListener('scroll',visible);

function visible(){
    if(window.pageYOffset>2000){
        var x = document.getElementById('wrapper').querySelectorAll('.div');
        i = 0;
        for (var i = 0 ; x.length >i; i++) {
            x[i].style.opacity = "1";
            x[i].style.transition = " 1s ease 0s ";
        }
    }else{  
        var x = document.getElementById('wrapper').querySelectorAll('.div');
        i = 0;
        for (var i = 0 ; x.length >i; i++) {
            x[i].style.opacity = "0";
            x[i].style.transition = " 1s ease 0s ";
        }
    }
}

Answer 1

你最好在你的 #wrapper 上设置一个类，然后在你的 CSS 中进行转换:

document
  .querySelector('#wrapper')
  .classList.toggle('-isVisible', window.pageYOffset > 2000);

CSS:

#wrapper .div {
  opacity: 0;
  transition: opacity 1s ease;
}
#wrapper.-isVisible .div {
   opacity: 1;  
}