在香草JS中，如何根據滾動條是否位於頂部來從元素中添加或刪除類？

Question

我試圖使粘性導航儀不在頂部滾動時具有特定的類，而在頂部滾動時不具有該類。 抱歉，這令人困惑。

我現在停留在的事實是，每當我滾動鼠標時，在底部代碼doc.scrollTop == 0中的評估結果為true 。 我究竟做錯了什么？

     HTMLElement.prototype.removeClass = function(remove) {
        var newClassName = "";
        var i;
        var classes = this.className.split(" ");
        for(i = 0; i < classes.length; i++) {
            if(classes[i] !== remove) {
                newClassName += classes[i] + " ";
            }
        }
        this.className = newClassName;
    }  

     window.onscroll = function() {

        var body = document.body; //IE 'quirks'
        var doc = document.documentElement; //IE with doctype
        doc = (doc.clientHeight) ? doc : body;

        if ( doc.scrollTop == 0 ) {
            document.getElementById('top').removeClass('scrolling');
            console.log("doc.scrollTop == 0");//TEST
        } else {
            document.getElementById('top').addClass('scrolling'); // need to make an addClass function ...
            console.log("doc.scrollTop != 0");//TEST
        }
    }; 

Answer 1

嘗試使用此方法獲取與頂部的距離：

var distance = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);

在您的代碼中：

 HTMLElement.prototype.removeClass = function(remove) {
    var newClassName = "";
    var i;
    var classes = this.className.split(" ");
    for(i = 0; i < classes.length; i++) {
        if(classes[i] !== remove) {
            newClassName += classes[i] + " ";
        }
    }
    this.className = newClassName;
}  

 window.onscroll = function() {

    var body = document.body; //IE 'quirks'
    var doc = document.documentElement; //IE with doctype
    doc = (doc.clientHeight) ? doc : body;

    var distance = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);

    if ( distance === 0 ) {
        document.getElementById('top').removeClass('scrolling');
        console.log("doc.scrollTop == 0");//TEST
    } else {
        document.getElementById('top').addClass('scrolling'); // need to make an addClass function ...
        console.log("doc.scrollTop != 0");//TEST
    }
}; 

盡管這可行，但我強烈建議您考慮改進您的JS代碼，使其與更多現代實踐保持一致。