title: Can anyone tell me, why my js code is not running on jsfiddle?
body: <p>The code below works on a live site but I can't get it to run on the site jsfiddle .
  it shows me the error given below:</p>
  
  <pre><code>{
    "message": "ReferenceError: $ is not defined",
    "filename": "https://stacksnippets.net/js",
    "lineno": 108,
    "colno": 9
  }
  </code></pre>
  
  <p>Can anyone tell me why it's not working on jsfiddle?
  I can't find the solution, anyone here who gave me the solution
  The code works as you can see when it's embedded here as snippet:</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).bind('scroll', function() {
      var navHeight = $( window ).height() - 70;
      if ($(window).scrollTop() &gt; navHeight) {
       $('nav').addClass('fixed');
      }
      else {
       $('nav').removeClass('fixed');
      }
    });
   });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*
  Tutorial Name: Scroll To Top Then Fixed Navigation Effect With JQuery and CSS
  https://stanhub.com/scroll-to-top-then-fixed-navigation-effect-with-jquery-and-css-free-download/
  Description: Create a sticky navigation bar that remains fixed to the top after scroll
  Author: Stan Kostadinov
  Author URI: https://stanhub.com
  Version: 1.0.0 - 11.01.2014
  */
  
  * {margin: 0; padding: 0;}
  
  a {text-decoration: none;}
  
  /* This class is added on scroll */
  .fixed {
   position: fixed;
   top: 0;
   height: 70px;
   z-index: 1;
  }
  
  body {
   color: #fff;
   font-family: 'open-sans-bold', AvenirNext-Medium, sans-serif;
   font-size: 18px;
   text-align: center;
  }
  
  /* Navigation Settings */
  nav {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 70px;
   background: #fff;
  }
  
  nav li {
   display: inline-block;
   padding: 24px 10px;
  }
  
  nav li a {
   color: #757575;
   text-transform: uppercase;
  }
  
  section {
   height: 100vh;
  }
  
  /* Screens Settings */
  #screen1 {
   background: #43b29d;
  }
  
  #screen1 p {
   padding-top: 200px;
  }
  
  #screen2 {
   background: #efc94d;
  }
  
  #screen3 {
   background: #e1793d;
  }
  
  @media only screen and (max-width: 520px) {
  
   nav li {
    padding: 24px 4px;
   }
  
   nav li a {
    font-size: 14px;
   }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="screen1"&gt;
  
   &lt;p&gt;Scroll down&lt;/p&gt;
  
   &lt;nav&gt;
     &lt;ul&gt;
     &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Team&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
   &lt;/nav&gt;
  
  &lt;/section&gt;
  
  &lt;section id="screen2"&gt;&lt;/section&gt;
  &lt;section id="screen3"&gt;&lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>