僅適用於一個按鈕的css類

當我滾動時，我想讓我的按鈕（2）固定在頁面中。僅適用於一個按鈕的css類

這是我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();

和fixed_btn的CSS：

.fixed_btn { 
    position: fixed; 
    top: 20%; 
    z-index: 9999; 
}

它的工作原理，但fixed_btn類是第一個按鈕僅適用，第二個留在相同的位置（滾動時上升）。

來源

2017-01-24 Alex

querySelector只選擇給定選擇器的第一個匹配。你想使用querySelectorAll，它返回所有匹配選擇器的元素。（docs here）

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

來源

2017-01-24 18:52:03

現在，我得到這些JavaScript錯誤：'btns.setAttribute不是function'和'btns.removeAttribute不是function' – Alex

因爲'querySelectorAll'是匹配多個項目，'btns'是一個數組，而不僅僅是之前的一個元素。如果你知道*有兩個按鈕，你可以明確地引用每個元素（即'btns [0] .setAttribute ...; btns [1] .setAttribute ...;'），如果可能有兩個以上的按鈕，你應該遍歷'btns'數組並在每個項目上調用這些函數。 –

我發現btns是一個節點。 – Alex

僅適用於一個按鈕的css類

回答

相關問題