画面のジャンプを設定する際に設定したときに$.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>