谁能告诉我，为什么我的JS代码没有在JSFiddle上运行

Question

下面的代码在实时站点上工作，但我无法在网站JSFIDDLE上运行。它显示了下面给出的错误：

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

谁能告诉我为什么它在JSfiddle上不起作用？我找不到解决方案，任何给我解决方案的人该代码的工作原理，您可以在此处嵌入以摘要：

时可以看到。

   $(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>

Answer 1

请检查此代码正常工作。您的代码不起作用的原因是您尚未将jQuery添加到代码

       $(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>

Answer 2

可能是您在JS小提琴上缺少jQuery库。

您可以检查此答案以查看如何添加jQuery。如何将jQuery添加到jsfiddle

Answer 3

jsfiddle允许您使用菜单添加外部JavaScript库/框架（单击'javascript''旁边的小齿轮图标）。您看到错误的原因是因为$是（通常）由JQuery定义，并且您没有使用JSFIDDLE选项包括JQuery。