title: Frustrating bug with Javascript
body: <p>My Jquery works just fine in text editors like fiddle and snippets on StackOverflow but once I put it in Brackets or even open it on Github, the navbar scroll down animation doesn't work. <a href="https://jsfiddle.net/op177v4u/301/" rel="nofollow noreferrer">Here</a> is a link to the fiddle, where I used the exact same code I used in Brackets and <a href="https://killerchef732.github.io/ItsAcademic/" rel="nofollow noreferrer">Github Pages.</a> (I just used a random background image).</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>$(document).ready(function() {
      $(window).scroll(function() {
          if ($(document).scrollTop() &gt; 10) {
              $('#nav').addClass('shrink');
          } else {
              $('#nav').removeClass('shrink');
          }
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/**********BODY GENERAL**********/
  body {
      margin: 0;
      height: 2500px;
      /* just to demonstrate how it will looks with content */
  }
  
  header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
  }
  
  /* Fix this one day */
  .bg-img {
      background: url('https://orig00.deviantart.net/2106/f/2012/329/0/e/untitled_drawing_by_walktheinch-d5m49xe.png') no-repeat center center;
      background-size: cover;
      height: 100vh;
  }
  
  strong {
      font-weight: bold;
  }
  
  /*********NAVIGATION*********/
  @media screen and (max-width: 900px) {
      nav {
          grid-template-columns: 100%;
          grid-template-rows: auto;
          grid-gap: 1em;
      }
  }
  
  .menu1 {
      grid-column: 1;
  }
  
  .menu2 {
      grid-column: 2;
  }
  
  .logo {
      grid-column: 3;
      font-family: 'Montserrat', sans-serif;
      font-weight: lighter;
      font-size: 28px;
      width: 500px;
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      height: 7vh;
      margin-bottom: 25px;
      color: #000;
      text-transform: uppercase;
      letter-spacing: 3px;
  }
  
  .menu3 {
      grid-column: 4;
  }
  
  .menu4 {
      grid-column: 5;
  }
  
  
  /**************HOVER ANIMATION**************/
  div&gt;a {
      font-family: 'Raleway';
      text-transform: uppercase;
      text-decoration: none;
      color: #000;
      position: relative;
      font-size: 0.8rem;
  }
  
  div&gt;a:hover {
      color: #000;
  }
  
  div&gt;a:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 1px;
      bottom: -4px;
      left: 0;
      background-color: #000;
      visibility: hidden;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
  }
  
  div&gt;a:hover:before {
      visibility: visible;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
  }
  
  /**********MAIN HEADER***********/
  header {
      color: white;
      justify-content: center;
      align-content: center;
      top: 0;
      bottom: 0;
      left: 0;
  }
  
  /**********BODY*****************/
  .Minfo {
      color: red;
      width: 100%;
      padding-top: 100px;
      font-family: 'Montserrat', sans-serif;
      font-weight: lighter;
  }
  
  .subtitle {
      padding-left: 4em;
      padding-top: 29em;
      font-size: 100%;
      color: #fff;
  }
  
  .title {
      font-size: 3em;
      text-align: left;
      color: #FFF;
      padding-bottom: 0px;
  }
  
  .subtext {
      padding-top: 0px;
      color: #FFF;
  }
  
  /************* NAV TRASPARENT TO OPAQUE ANIMATION *************/
  nav {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-gap: 1em;
      grid-auto-rows: auto;
      text-align: center;
      align-items: center;
      background: transparent;
      */ z-index: 100;
      transition: all ease .5s;
      height: 70px;
      position: relative;
  }
  
  /*============= NEW CSS RULES ============*/
  
  #nav {
    position: relative;
  }
  
  #nav .logo p {
    margin: 10px 0;
  }
  
  #nav .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #ededed;
    height: 0;
    transition: height 800ms ease;
  }
  
  #nav.shrink .background {
    height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Centennial It's Academic&lt;/title&gt;
      &lt;link href="/favicon.ico" rel="shortcut icon" type="image/x-icon"&gt;
      &lt;link href="main.css" rel="stylesheet"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet"&gt;
      &lt;!-- Linking Jquery/Javascript --&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="bg-img"&gt;
          &lt;header&gt;
              &lt;div id="nav"&gt;
              &lt;!---- NEW BACKGROUND ELEMENT HERE ----&gt;
                  &lt;div class="background"&gt;&lt;/div&gt;
                  &lt;nav class="container"&gt;
                      &lt;div class="menu1"&gt;
                          &lt;a id="navLinks" href="#home"&gt;Home&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="menu2"&gt;
                          &lt;a id="navLinks" href="#upcoming"&gt;Tournaments&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="logo"&gt;
                          &lt;p&gt;It's Academic&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="menu3"&gt;
                          &lt;a id="navLinks" href="#history"&gt;History&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="menu4"&gt;
                          &lt;a id="navLinks" href="#faq"&gt;Contact Info&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/nav&gt;
                  &lt;!-- This cluster of info --&gt;
              &lt;/div&gt;
          &lt;/header&gt;
  
          &lt;div class="Minfo"&gt;
              &lt;div class="subtitle"&gt;
                  CENTENNIAL&lt;br&gt;
                  &lt;div class="title"&gt;
                      It's Academic
                  &lt;/div&gt;
                  &lt;br&gt;
                  &lt;div class="subtext"&gt;
                      Meets every Tuesday in Room 506
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>