css类仅适用于一个按钮

时间:2017-01-24 18:49:58

标签: javascript css button

当我滚动时,我想将我的按钮(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; } 类仅适用于第一个按钮,第二个按钮保持在相同位置(滚动时会增加)。

1 个答案:

答案 0 :(得分:3)

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

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