title: Javascript not activating
body: <p>I have a script that is made to add <code>.fix</code> class to a <code>header</code> tag with <code>#header-wrap</code> id once the page is scrolled a certain amount, but for some reason nothing happens on scroll.
  HTML:</p>
  
  <pre><code>&lt;header id="header-wrap"&gt;
          &lt;div id="redline"&gt;&lt;/div&gt;
          &lt;div id="velkommen"&gt;&lt;/div&gt;
          &lt;div id="header"&gt;
              &lt;div id="indre"&gt;
                  &lt;h1 id="logo"&gt;&lt;a href="index.html"&gt;MCBERGBYS&lt;/a&gt;&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/header&gt;
      &lt;script&gt;
  var wrap = $("#header-wrap");
  
  wrap.on("scroll", function(e) {
  
    if (this.scrollTop &gt; 143) {
      wrap.addClass("fix");
    } else {
      wrap.removeClass("fix");
    }
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I'm very new to javascipt so I bet something obvious is off. Any help is appreciated, thank you.</p>