Javascript 如何从Codepen获得JS代码？

以下是代码笔的链接：

我使用括号创建了一个html、css、js文件。除了js之外，一切似乎都正常。我已经在head部分链接了css和js文件。我是否需要链接其他东西或下载额外的文件

Head标记如下所示：

<link type="text/css" rel="stylesheet" href="style.css" />
<script src="theFile.js"></script>

JS代码：

var sections = $('section')
  , nav = $('nav')
  , nav_height = nav.outerHeight();

$(window).on('scroll', function () {
  var cur_pos = $(this).scrollTop();

  sections.each(function() {
    var top = $(this).offset().top - nav_height,
        bottom = top + $(this).outerHeight();

    if (cur_pos >= top && cur_pos <= bottom) {
      nav.find('a').removeClass('active');
      sections.removeClass('active');

      $(this).addClass('active');
      nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
    }
  });
});

nav.find('a').on('click', function () {
  var $el = $(this)
    , id = $el.attr('href');

  $('html, body').animate({
    scrollTop: $(id).offset().top - nav_height
  }, 500);

  return false;
});

var sections=$（“section”）
，资产净值=$（“资产净值”）
，nav_height=nav.outerHeight（）；
$（窗口）.on（'scroll'，函数（）{
var cur_pos=$（this.scrollTop（）；
节。每个（函数（）{
var top=$（this）.offset（）.top-导航高度，
bottom=top+$（this.outerHeight（）；
如果（cur_pos>=top&&cur_pos，则在包含
jquery.min.js
之后必须包含JavaScript文件。否则，在初始化jquery之前将执行代码

删除
标题中的
标记，并将其添加到HTML的最底部

<nav>
  <ul>
    <li><a href="#1">First</a></li>
    <li><a href="#2">Second</a></li>
    <li><a href="#3">Third</a></li>
    <li><a href="#4">Fourth</a></li>
    <li><a href="#5">Fifth</a></li>
  </ul>
</nav>

<div class="sections">
  <section id="1"><h1>First</h1></section>
  <section id="2"><h1>Second</h1></section>
  <section id="3"><h1>Third</h1></section>
  <section id="4"><h1>Fourth</h1></section>
  <section id="5"><h1>Fifth</h1></section>
</div>

<footer></footer>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="theFile.js"></script>

在控制台中


编辑：
您可以通过等待完全加载页面来确保在执行代码时初始化jQuery。您只需使用
$（document.ready（）
函数包装代码即可

$(document).ready(function(){
    var sections = $('section')
      , nav = $('nav')
      , nav_height = nav.outerHeight();

    $(window).on('scroll', function () {
      var cur_pos = $(this).scrollTop();

      sections.each(function() {
        var top = $(this).offset().top - nav_height,
            bottom = top + $(this).outerHeight();

        if (cur_pos >= top && cur_pos <= bottom) {
          nav.find('a').removeClass('active');
          sections.removeClass('active');

          $(this).addClass('active');
          nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
        }
      });
    });

    nav.find('a').on('click', function () {
      var $el = $(this)
        , id = $el.attr('href');

      $('html, body').animate({
        scrollTop: $(id).offset().top - nav_height
      }, 500);

      return false;
    });
});

$（文档）.ready（函数（）{
var sections=$（“section”）
，资产净值=$（“资产净值”）
，nav_height=nav.outerHeight（）；
$（窗口）.on（'scroll'，函数（）{
var cur_pos=$（this.scrollTop（）；
节。每个（函数（）{
var top=$（this）.offset（）.top-导航高度，
bottom=top+$（this.outerHeight（）；
如果（cur_pos>=top&&cur_pos您在浏览器中是否遇到任何控制台错误？正如Phani所说，尝试通过单击F12检查开发人员的控制台，如果它没有出现在底部，则可能单击Esc。不幸的是，我仍然得到在定义“$”之前使用过的“$”。方括号感觉js文件中有5个错误，我将修复该错误m通过添加以下内容：/*jslint浏览器：true*/*global$，jQuery，alert*/@ModChelly我更新了答案以使用
$（document.ready（））
函数。似乎是插件故障。我刚刚尝试了1.6.4 jquery，并在所有div中添加了一个红色边框，它工作了。使用您的原始代码？如果是，您可能应该在问题中提及它作为编辑。
<nav>
  <ul>
    <li><a href="#1">First</a></li>
    <li><a href="#2">Second</a></li>
    <li><a href="#3">Third</a></li>
    <li><a href="#4">Fourth</a></li>
    <li><a href="#5">Fifth</a></li>
  </ul>
</nav>

<div class="sections">
  <section id="1"><h1>First</h1></section>
  <section id="2"><h1>Second</h1></section>
  <section id="3"><h1>Third</h1></section>
  <section id="4"><h1>Fourth</h1></section>
  <section id="5"><h1>Fifth</h1></section>
</div>

<footer></footer>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="theFile.js"></script>

$ is not defined

$(document).ready(function(){
    var sections = $('section')
      , nav = $('nav')
      , nav_height = nav.outerHeight();

    $(window).on('scroll', function () {
      var cur_pos = $(this).scrollTop();

      sections.each(function() {
        var top = $(this).offset().top - nav_height,
            bottom = top + $(this).outerHeight();

        if (cur_pos >= top && cur_pos <= bottom) {
          nav.find('a').removeClass('active');
          sections.removeClass('active');

          $(this).addClass('active');
          nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
        }
      });
    });

    nav.find('a').on('click', function () {
      var $el = $(this)
        , id = $el.attr('href');

      $('html, body').animate({
        scrollTop: $(id).offset().top - nav_height
      }, 500);

      return false;
    });
});