2016-05-29 3 views
0

画面のジャンプを設定する際に設定したときに$.fn.fullpage.setAutoScrolling(true);onStartまたはそのような何かを回避するために、fullPage.js内のオプションがあり、次の画面にジャンプ画面?fullPage.jsはsetAutoScrolling(真の)次の画面へ

$.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>

答えて

0

ないあなたが達成しようとしているが、私は理解するものは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

関連する問題