title: add className on scroll in JavaScript
body: <p>I'm trying to add a <code>className</code> on scroll. I keep getting a </p>
  
  <blockquote>
    <p>document is undefined</p>
  </blockquote>
  
  <p><strong>edit:</strong> I found out I was getting the error from the typo. When I define <code>document.getElementsByClassName("main-nav").scrollTop</code> nothing comes up in the <code>console</code>. As well as the page does not get affected.</p>
  
  <pre class="lang-js prettyprint-override"><code>window.onscroll = function() {
    windowScroll();
  };
  
  function windowScroll() {
    if (document.getElementsByClassName("main-nav").scrollTop &gt; 50 || document.documentElement.scrollTop &gt; 50) {
      document.getElementsByClassName("main-nav").className = "test";
    } else {
      document.getElementsByClassName("main-nav").className = "";
    }
  }
  </code></pre>
  
  <p>CSS is </p>
  
  <pre class="lang-css prettyprint-override"><code>.test {
    background: pink
  }
  </code></pre>
  
  <p>I'm not necessarily looking for the answer, I just want guidance </p>