css类仅适用于一个按钮

Question

当我滚动时，我想将我的按钮（2）固定在页面中。

这是我的JavaScript功能：

function init() {
  window.addEventListener('scroll', function(e){
    var distanceY = window.pageYOffset || document.documentElement.scrollTop,
        shrinkOn = 350,
        btn = document.querySelector("button");
    if (distanceY > ShrinkOn) {
      btn.setAttribute("class", "fixed_btn");
    }
    else
      btn.removeAttribute("class");
  });
}
window.onload = init();

CSS的{​​{1}}：

fixed_btn

可行，但.fixed_btn { position: fixed; top: 20%; z-index: 9999; } 类仅适用于第一个按钮，第二个按钮保持在相同位置（滚动时会增加）。

Answer 1

querySelector仅选择给定选择器的第一个匹配项。您想使用querySelectorAll，它返回与选择器匹配的所有元素。 （docs here）

var btns = document.querySelectorAll('button');