航点插件未按预期初始化答案

【问题标题】：waypoint plugin not initialising as expected航点插件未按预期初始化
【发布时间】：2017-08-23 07:27:22
【问题描述】：

我正在尝试使用航路点。我无法初始化插件。我想使用粘性功能来保持我的标题粘性。由于如果我使用 'positon:sticky' 在 IE11 中出现问题，我正在尝试使用这个插件。链接到 plunkr ： https://plnkr.co/edit/mRhgVuXZSSX8QpPeeBbK?p=preview

index.html

 <body>
    <div id="section" class="section">
      <div class="heading">
        Header
          </div>
        <ul>
          <li>
            <div class="heading">
              Sub-heading1
                </div>
              <ul>
                <li>Sub-heading1 </li>
                <li>Sub-heading1 </li>
                <li>Sub-heading1 </li>
                <li>Sub-heading1 </li>
                <li>Sub-heading1 </li>
                <li>Sub-heading1 </li>
                <li>Sub-heading1 </li>
                <li>Sub-heading1 </li>
                <li>Sub-heading1 </li>
                <li>Sub-heading1 </li>
                <li>Sub-heading1 </li>
                <li>Sub-heading1 </li>
                <li>Sub-heading1 </li>

                <li>Sub-heading1 </li>
                <li>Sub-heading1 </li>

                <li>Sub-heading1 </li>
              </ul></li>
          <li>Sub-heading1 </li>
          <li>Sub-heading1 </li>
          <li>Sub-heading1 </li>
          <li>Sub-heading1 </li>
          <li>Sub-heading1 </li>
          <li>Sub-heading1 </li>
          <li>Sub-heading1 </li>
          <li>Sub-heading1 </li>
          <li>Sub-heading1 </li>
          <li>Sub-heading1 </li>
          <li>Sub-heading1 </li>
          <li>Sub-heading1 </li>

          <li>Sub-heading1 </li>
          <li>Sub-heading1 </li>

          <li>Sub-heading1 </li>
        </ul>

    </div>
    <script src="jquery.js"></script>
    <script src="jquery.waypoints.min.js"></script>
<script src="sticky.min.js"></script>
    <script src="main.js"></script>

  </body>

css代码：

 <style media="screen">
  .sticky {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
  }
  .sticky:before,
  .sticky:after {
      content: '';
      display: table;
  }
  .section {
    background: yellow;
    height: 300px;
    margin-top: 200px;
    left: 300px;
    overflow-y: scroll;
  }

  </style>

这是脚本初始化，当我滚动时没有任何反应。

$(function() {
var waypoint = new Waypoint({
element: document.getElementById('section'),
handler: function(direction) {
  console.log('Scrolled to waypoint!')
}

}) });

我的期望是，当我滚动部分容器时，航点初始化并呈现函数 nut，到目前为止没有任何反应。

【问题讨论】：

能否提供一个jsfiddle或者codePen出现同样问题的地方？
你链接jquery了吗？这是 jquery.js 吗？
是的。它是jQuery。我会链接小提琴
我在代码中添加了 plunkr 链接

标签： jquery-waypoints

【解决方案1】：

很简单，在你的css中添加以下内容：

html, body {
  height: 100%;
}

并且您缺少指向初始化航点的 script.js 的链接

<script src="script.js"></script>

【讨论】：

添加 plunkr 时我会匆忙错过的脚本。但是，即使我将您提到的更改添加到我的 css 中，它仍然无法正常工作
您的问题中也缺少它
它有效：codepen.io/Kathara/pen/yoEgZX 尝试删除我要求您添加的部分，它将不再有效
确保您确实没有遗漏任何东西。在 Chrome 中按 Ctrl + Shift + i 您可以打开开发人员选项卡。也许有一个错误代码，如果它仍然不起作用，您可以发布......
嗨。谢谢你的帮助。我只是想在这里澄清一下。我将溢出设置为在 id 为“section”的元素上滚动。因此，当我滚动“部分容器”时，我期待航路点正常工作。现在它似乎在处理页面滚动。有错请指正。