当我滚动时,我想将我的按钮(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;
}
类仅适用于第一个按钮,第二个按钮保持在相同位置(滚动时会增加)。
答案 0 :(得分:3)
querySelector
仅选择给定选择器的第一个匹配项。您想使用querySelectorAll
,它返回与选择器匹配的所有元素。 (docs here)
var btns = document.querySelectorAll('button');