Question

我正在尝试使用方式点。我无法初始化插件。我想使用粘性函数来保持我的标题粘性。因为我在IE11中遇到问题，如果我使用'positon：sticky'，我试图使用这个插件。链接到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!')
}

}） }）;

我的期望是，当我滚动节容器时，航点初始化并渲染函数，现在没有任何事情发生。

Answer 1

这很简单，将以下内容添加到您的CSS中：

html, body {
  height: 100%;
}

并且您错过了初始化航点

的script.js链接

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

waypoint插件未按预期初始化

1 个答案: