Javascript 在vanilla JS中，如何根据滚动是否在顶部从元素中添加或删除类？

我试图使一个粘性导航在不在顶部滚动时有一个特定的类，并且在顶部滚动时没有该类。对不起，如果这让人困惑的话

我现在一直坚持的是，在代码的底部，每当我滚动鼠标时，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
        }
    }; 

HTMLElement.prototype.removeClass=函数（删除）{
var newClassName=“”；
var i；
var classes=this.className.split（“”）；
对于（i=0；i

尝试使用此选项来获得与顶部的距离：

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
    }
}; 

HTMLElement.prototype.removeClass=函数（删除）{
var newClassName=“”；
var i；
var classes=this.className.split（“”）；
对于（i=0；i

---

虽然这是可行的，但我强烈建议您改进JS代码，使其与更现代的实践保持一致。

试着使用这一点来与顶部保持距离：

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
    }
}; 

HTMLElement.prototype.removeClass=函数（删除）{
var newClassName=“”；
var i；
var classes=this.className.split（“”）；
对于（i=0；i

---

虽然这是可行的，但我强烈建议您改进JS代码，使之符合更现代的实践。

protip：您称之为

removeClass

，它是

元素。classList.remove（…）

函数。类似地，

add

和

toggle

已经存在（阅读现代HTML可能是个好主意）。另外，不要使用15岁以上的

窗口。onscroll

，使用适当的现代

窗口。addEventListener（“滚动”，函数（evt）{…}）事件处理。最后，看一看.protip：您称之为
removeClass
，它是
元素.classList.remove（…）
函数。类似地，
add
和
toggle
已经存在（阅读现代HTML可能是个好主意）。另外，不要使用15岁以上的
窗口。onscroll
，使用适当的现代
窗口。addEventListener（“滚动”，函数（evt）{…}）事件处理。最后，看一看。