fullPage js,单独的autoscroll

时间:2016-11-03 06:01:32

标签: javascript jquery html scroll fullpage.js

我有fullPage.js的问题 我有5节,我想分开自动滚动, 第1节到第3节使用自动滚动,第4.1到4.2节使用正常滚动 任何的想法? 这是我的代码



 $(document).ready(function(){
    var s, d;
    $('#fullpage').fullpage({
      anchors: ['anchor1', 'anchor2', 'anchor3', 'anchor41', 'anchor42'],
      menu: '#menu',
      navigation: true,
      navigationPosition: 'right',
      navigationTooltips: ['First page', 'Second page', 'Third and last jump', 'Free', 'free!!'],
      onLeave: function(index, nextIndex, direction){
            leavingSection = $(this);
            console.log(leavingSection.prop('id'));
            s = leavingSection.data('scroller');
            if(direction == "up"){
              d = leavingSection.prev().data('scroller');
            }else if(direction == "down"){
              d = leavingSection.next().data('scroller');
            }
      },
      afterLoad: function(anchorLink, index){
        var loadedSection = $(this);
        if(s=="normal" && d=="auto"){
          $.fn.fullpage.setAutoScrolling(true);
        }else if(s=="auto" && d=="normal"){
          $.fn.fullpage.setAutoScrolling(false);
        }
      }
    });
  });

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/jquery.fullPage.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.8/vendors/scrolloverflow.min.js"></script>


<div id="fullpage">
      <div id="section1" class="container-fluid section" data-scroller="auto">
        <h1>Section 1</h1>
      </div>
      <div id="section2" class="container-fluid section" data-scroller="auto">
        <h1>Section 2</h1>
      </div>
      <div id="section3" class="container-fluid section" data-scroller="auto">
        <h1>Section 3</h1>
     </div>
      <div id="section41" class="container-fluid section" data-scroller="normal">
        <h1>Section 4 Submenu 1</h1>
      </div>
      <div id="section42" class="container-fluid section" data-scroller="normal">
        <h1>Section 4 Submenu 2</h1>
      </div>
   </div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

fullPage.js没有为它提供任何解决方案。你必须自己编写代码并且可能不会是完美的。

您可以做的最多是使用函数rank并使用回调打开和关闭autoScrolling,但这会导致不良结果。 如:

  • autoScrolling从1到2
  • 使用setAutoScrolling回拨
  • 关闭第2部分中的autoScrolling
  • 从2开始正常滚动
  • 从2滚动到1不会使用onLeave来执行此操作,因为您必须在onLeave回调上启用它,只有在第1部分的内容中才会被触发视口大于第二部分的视口

Reproduction online

autoScrolling