在香草JS中，如何根据滚动条是否位于顶部来从元素中添加或删除类？

Question

I'm trying to make a sticky nav have a particular class when not scrolled at the top, and not have that class when scrolled at the top. Sorry if that's confusing.

What I'm stuck on right now is the fact that in the bottom piece of code doc.scrollTop == 0 is evaluating to true whenever I scroll the mouse. What am I doing wrong?

     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

Try using this to get the distance from the top:

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

And in your code:

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

Whilst this works, I would strongly suggest looking at improving your JS code to be in line with more modern practices.