title: How can I get this scroll Event working? JavaScript with no framework
body: <p>I`m trying to add an scroll event listener in JavaScript based on this: <a href="https://github.com/Godsont/Animated-Sticky-Header" rel="nofollow noreferrer">https://github.com/Godsont/Animated-Sticky-Header</a>.
  But for some reason it isn´t working, when I scroll nothing happens. Can anyone help me pls? I´m new to JavaScript so I want to keep things as simple as possible.</p>
  <p>I´m using Google Chrome btw.</p>
  <p>I want to add an event on the id = &quot;mainHeader&quot; from Header. When the user scrolls down I want the background to change color, the logo img and the itens from the ul to get a little bit smaller. I also want the height from the header to get a little smaller. (the changes that I want are in the css and have &quot;.is-crolling&quot;).</p>
  <p>Thanks!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.addEventListener("scroll", scrollHeader() );
  
  function scrollHeader() {
    var mainHeader = document.getElementByID("mainHeader");
    if (window.pageYOffset &gt; 0) {
      mainHeader.classList.add("is-scrolling");
    } else {
      mainHeader.classList.remove("is-scrolling");
    }
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#mainHeader {
    background-color: white;
    position: fixed;
    width: 100%;
    height: 80px;
    z-index: 3;
    transition: background 0.4s;
  }
  
  #mainHeader.is-scrolling {
    background: #333;
  }
  
  #mainHeader.is-scrolling a {
    color: #eee;
    font-size: 13px;
  }
  
  #mainHeader.is-scrolling .header-logo img {
    width: 60px;
    height: 40px;
    border-radius: 5px;
  }
  
  .page-logo-nav {
    margin: 15px 115px 15px 115px;
  }
  
  .header-logo img {
    float: left;
    width: 70px;
    height: 50px;
    transition: height 0.4s;
  }
  
  .header-nav {
    float: right;
    height: 50px;
    display: flex;
    align-items: center;
  }
  
  .header-nav li {
    display: inline;
  }
  
  .header-nav .list-1:after {
    content: "★";
  }
  
  .header-nav a {
    color: black;
    padding: 20px;
    text-decoration: none;
    font-weight: 900;
    font-size: 15px;
    transition: font-size 0.4s;
  }
  
  .header-nav a:hover {
    color: #6ebbd3;
    border-top: 1px solid #266a7e;
    border-bottom: 1px solid #266a7e;
    transition: 0.3s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Stuff&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
    &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anton%7CMontserrat%7COpen+Sans%3A300%2C300i%2C400%2C400i%2C600%2C600i%2C700%2C700i%2C800%2C800i%7CPT+Sans%3A400%2C700&amp;amp;ver=4.0.31" type="text/css" media="all"&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/styles.css"&gt;
    &lt;script src="JS/main.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;header id="mainHeader"&gt;
      &lt;div class="page-logo-nav"&gt;
        &lt;div class="header-logo"&gt;
          &lt;a href="index.html"&gt;
            &lt;img src="img/logo.jpg"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="header-nav"&gt;
          &lt;nav&gt;
            &lt;ul&gt;
              &lt;li class="list-1"&gt;&lt;a href="index.html"&gt;SOBRE&lt;/a&gt;&lt;/li&gt;
              &lt;li class="list-2"&gt;&lt;a href="contactos.html"&gt;CONTACTOS&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/nav&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/header&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>