title: Change header background after the user scrolls
body: <p>I've been googling about this and came across this solution:</p>
  <pre><code>$(function() {
      $(window).on(&quot;scroll&quot;, function() {
          if($(window).scrollTop() &gt; 50) {
              $(&quot;.header&quot;).addClass(&quot;active&quot;);
          } else {
              //remove the background property so it comes transparent again
             $(&quot;.header&quot;).removeClass(&quot;active&quot;);
          }
      });
  });
  </code></pre>
  <p>Here's the CSS:</p>
  <pre><code>header{
      display: flex;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: transparent;
      height: 70px;
      align-items: center;
      justify-content: space-between;
  }
  
  .active{
      background-color: lightgray;
  }
  </code></pre>
  <p>And the HTML:</p>
  <pre><code>&lt;body&gt;
  
      &lt;header&gt;
  
          &lt;a href=&quot;#&quot; class=&quot;logo&quot;&gt;
              &lt;h3&gt;
                  Logo will go here
              &lt;/h3&gt;
          &lt;/a&gt;
  
          &lt;div class=&quot;header-links&quot;&gt;
              &lt;a id=&quot;home-link&quot; href=&quot;#home&quot;&gt;Home&lt;/a&gt;
              &lt;a id=&quot;portfolio-link&quot; href=&quot;#portfolio&quot;&gt;Portfolio&lt;/a&gt;
              &lt;a id=&quot;about-link&quot; href=&quot;#about&quot;&gt;About me&lt;/a&gt;
              &lt;a id=&quot;contact-link&quot; href=&quot;#contact&quot;&gt;Contact&lt;/a&gt;
          &lt;/div&gt;
  
      &lt;/header&gt;
  </code></pre>
  <p>And at the end of the body in my html is:</p>
  <pre><code>    &lt;script src=&quot;{{ asset('js/script.js') }}&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  <p>The browser Dev Tools console show this error 3 times:</p>
  <pre><code>Uncaught ReferenceError: $ is not defined
  </code></pre>
  <p>What I need is for the Header to change into a new background color after the user scrolls the screen down some pixels. I serached online and mostly found the same fix which is this presented above, but for some reason it just don't work, my header never changes the background color. Any ideas why?</p>