Can anyone tell me, why my js code is not running on jsfiddle?

Question

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:

{
  "message": "ReferenceError: $ is not defined",
  "filename": "https://stacksnippets.net/js",
  "lineno": 108,
  "colno": 9
}

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:

   $(document).ready(function(){
    $(window).bind('scroll', function() {
    var navHeight = $( window ).height() - 70;
    if ($(window).scrollTop() > navHeight) {
     $('nav').addClass('fixed');
    }
    else {
     $('nav').removeClass('fixed');
    }
  });
 });

/*
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;
 }

}

<section id="screen1">

 <p>Scroll down</p>

 <nav>
   <ul>
   <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Team</a></li>
      <li><a href="#">Contact</a></li>
   </ul>
 </nav>

</section>

<section id="screen2"></section>
<section id="screen3"></section>

Possible duplicate of [How to add jQuery to JSfiddle](https://stackoverflow.com/questions/36620565/how-to-add-jquery-to-jsfiddle) — agrm, Dec 02 '17 at 07:52

score 1 · Accepted Answer · answered Dec 02 '17 at 05:29

Please check now this code is working fine. The reason why your code is not working is that you haven't added jquery to your code

       $(document).ready(function(){
        $(window).bind('scroll', function() {
        var navHeight = $( window ).height() - 70;
        if ($(window).scrollTop() > navHeight) {
         $('nav').addClass('fixed');
        }
        else {
         $('nav').removeClass('fixed');
        }
      });
     });

    * {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;
     }

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="screen1">

     <p>Scroll down</p>

     <nav>
       <ul>
       <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Team</a></li>
          <li><a href="#">Contact</a></li>
       </ul>
     </nav>

    </section>

    <section id="screen2"></section>
    <section id="screen3"></section>

@CodeQuit if you like & satisfy with my answer please vote me up — Harden Rahul, Dec 02 '17 at 05:46
@CodeQuit every time a person helps than you should help him back by appreciating or vote him up by pressing up arrow. — Harden Rahul, Dec 02 '17 at 05:48
the jQuery is used in html field is auto removed, when i refreshed page after save. — Aman Sharma, Dec 02 '17 at 05:56

score 0 · Answer 2 · answered Dec 02 '17 at 05:25

0

May be you are missing jQuery library on JS Fiddle.

You can check this answer to see how to add jQuery. How to add jQuery to JSfiddle

answered Dec 02 '17 at 05:25

vatsal mevada

5,148
7
39
68

but when i refreshed the page, it changed to default settings. – Aman Sharma Dec 02 '17 at 05:45
you need to click the "save" button and then if you will refresh the page it will preserve your external library. – vatsal mevada Dec 02 '17 at 05:49

score 0 · Answer 3 · answered Dec 02 '17 at 05:32

0

JSFiddle allows you to add external JavaScript libraries/frameworks using a menu (click the little gear icon next to 'JavaScript'). The reason you're seeing that error is because $ is (usually) defined by JQuery, and you haven't included JQuery using the JSFiddle options.

answered Dec 02 '17 at 05:32

Rich Churcher

7,361
3
37
60

but when i refreshed the page, it changed to default settings. – Aman Sharma Dec 02 '17 at 05:45

Can anyone tell me, why my js code is not running on jsfiddle?

3 Answers3