title: In vanilla JS, how can I add or remove a class from an element based on whether the scroll is at the top?
body: <p>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. </p>
  
  <p>What I'm stuck on right now is the fact that in the bottom piece of code <code>doc.scrollTop == 0</code> is evaluating to <code>true</code> whenever I scroll the mouse. What am I doing wrong?</p>
  
  <pre><code>     HTMLElement.prototype.removeClass = function(remove) {
          var newClassName = "";
          var i;
          var classes = this.className.split(" ");
          for(i = 0; i &lt; 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
          }
      }; 
  </code></pre>