javascript - 我如何从 Codepen 获取这个 JS 代码来工作？

Question

这是 codepen 的链接:https://codepen.io/rishabhp/pen/aNXVbQ?limit=all&page=7&q=navigation+bar

我正在使用 Brackets 并创建了一个 html、css、js 文件。除了 js 之外，一切似乎都在工作。我已经在 head 部分链接了 css 和 js 文件。我是否必须以某种方式链接其他内容或下载额外的文件？

head 标签看起来像这样:

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

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>

CSS 代码:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
}

/* Navigation */

nav {
  width: 100%;
  height: 60px; 
  position: fixed; 
  top: 0;
  background: #1ABC9C;
}

nav ul {
  padding: 20px;
  margin: 0 auto;
  list-style: none;
  text-align: center;
}
nav ul li {
  display: inline-block;
  margin: 0 10px;
}
nav ul li a {
  padding: 10px 0;
  color: #fff;
  font-size: 1rem;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.2s ease;
}
nav ul li a:hover {
  color: #34495E;
}
a.active {
  border-bottom: 2px solid #ecf0f1;
}

/* Headings */

h1 {
  font-size: 5rem;
  color: #34495E;
}

/* Sections */

section {
  width: 100%;
  padding: 50px;
  background: #fff;
  border-bottom: 1px solid #ccc;
  height: 500px;
  text-align: center;
}
section:nth-child(even) {
  background: #ecf0f1;
}
section:nth-child(odd) {
  background: #bdc3c7;
}
.sections section:first-child {
  margin-top: 60px;
}
section.active {}

footer {
  height: 500px;
  background: #34495e;
}

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;
});

Answer 1

您必须在包含 jquery.min.js 之后包含您的 JavaScript 文件.否则，您的代码会在 jQuery 初始化之前执行。

删除 <script src="theFile.js"></script>在head标记并将其添加到 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>

你可以检查一下你的控制台(快捷键:F12)，应该有这样的错误

$ is not defined

在控制台中。

---

编辑:

您可以通过等待页面完全加载来确保在执行代码时初始化 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;
    });
});