Question

设置$.fn.fullpage.setAutoScrolling(true);时，屏幕会跳转到下一个屏幕 fullPage.js 中是否有选项以避免使用onStart或类似内容？

要设置$.fn.fullpage.setAutoScrolling(false);正常工作，条件为if (index == 3 && direction == 'down')，但非常不幸的是$.fn.fullpage.setAutoScrolling(true);向上滚动时无效。

演示：http://codepen.io/athimannil/pen/XKWzOX

$('#fullpage').fullpage({
  anchors: ['page1', 'page2', 'page3', 'page4'],
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
  onLeave: function(anchorLink, index, direction) {
    if (index == 3 && direction == 'down') {
      $.fn.fullpage.setAutoScrolling(false);
      $.fn.fullpage.setFitToSection(false);
    } else {
      $.fn.fullpage.setAutoScrolling(true);
      $.fn.fullpage.setFitToSection(true);
    }
  },
});

body {
  margin: 0;
  padding-bottom: 100px !important;
}
.section {
  text-align: center;
  font-size: 3em;
}
.content {
  margin: 50px
}
footer {
  height: 100px;
  background-color: tomato;
  color: white;
  width: 100%;
  padding: 10px 0;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -3;
}
p {
  font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<div id="fullpage">
  <div class="section">One</div>
  <div class="section">Two</div>
  <div class="section">Three</div>
</div>
<footer>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis aperiam incidunt sunt recusandae sint impedit. Eos est ducimus, saepe nobis nesciunt laboriosam officia voluptatibus, totam corporis deserunt at, mollitia iste!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae magni illo facilis, nemo repellat laudantium sequi incidunt odio fugit quibusdam optio dicta, amet, fugiat cumque? Aut eos esse autem, nobis.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores accusantium soluta debitis aliquam earum enim a libero sapiente porro voluptatibus, voluptas dolor saepe deleniti ut tempora ipsam reprehenderit facilis rem.</p>
</footer>

Answer 1

不是100％肯定你想要达到的目标，但我想，你想在滚动第三张幻灯片后看到你的固定页脚。

我会发布第4张透明幻灯片，并且不会因为意外行为而混淆滑块/滚动条的基本功能。

<div class="section"></div> <!-- adding a 4th section to my HTML -->

<script>
  $('#fullpage').fullpage({
    anchors: ['page1', 'page2', 'page3', 'page4'],
    sectionsColor: ['yellow', 'orange', '#C0C0C0', 'transparent']
  });
</script>

my codepen example

设置setAutoScrolling（true）

1 个答案: