fullPage.js vertical navigation arrows
HTML
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<link rel="stylesheet" href="https://rawgit.com/jackmu95/fullPage.js/master/jquery.fullPage.css">
<div id="fullpage">
<div id="section1" class="section">
<h1>Sessão 1</h1>
</div>
<div id="section2" class="section">
<h1>Sessão 2</h1>
<p>Sessão onde o evento acontece</p>
<button>Botão</button>
</div>
<div id="section3" class="section">
<h1>Sessão 3</h1>
</div>
</div>
<div id="modal">
<div class="fundo"></div>
<div class="modal-content">
<div class="fundo_close"></div>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</div>
CSS
body,html{padding:0;margin:0;}
/* Section styles */
.section{text-align: center;}
.section h1,.section p {color: #333333;margin: 0;}
/* Janela Modal */
#modal{display:none;position:fixed;width:100%;height:100%;top:0;left:0;z-index:101;}
.fundo{background:rgba(0,0,0,.8);width:100%;height:100%;top:0;left:0;position:absolute}
.fundo_close{width:100%;height:100%;top:0;left:0;position:absolute}
.modal-content{width:100%;height:100%;top:0;left:0;position:absolute;}
.item{float:left;position:relative;width:100%;height:50px;margin:15px;background:#fff;z-index:1;}
JavaScript
$(function() {
// Initialize fullPage
$('#fullpage').fullpage({
//Scrolling
css3: true,
scrollingSpeed: 1400,
autoScrolling: false,
fitToSection: false,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
normalScrollElements: '#element1, .element2',
scrollOverflow: true,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,
//Navigation
navigation: true,
navigationTooltips: ['First section', 'Second section', 'Third section'],
sectionsColor: ['#f1c40f', '#e67e22', '#c0392b'],
onLeave: function(index, nextIndex, direction) {
// Remove the inactive class from all arrows
$('#fp-nav > span').removeClass('inactive');
// Add inactive class if needed
if (nextIndex == 1) {
$('#fp-nav > span.prev').addClass('inactive');
} else if (nextIndex == $('.fp-section').length) {
$('#fp-nav > span.next').addClass('inactive');
}
}
});
// Add previous and next arrows to the fullPage navigation
$('#fp-nav').prepend('<span class="prev inactive">↑</span>')
.append('<span class="next">↓</span>');
// Re-center the fullPage navigation
$('#fp-nav').css({ 'margin-top': '-' + ($('#fp-nav').height() / 2) + 'px' });
// Add actions to the arrows
$('#fp-nav').find('span.prev, span.next').on('click', function() {
if ($(this).hasClass('prev')) {
$.fn.fullpage.moveSectionUp();
} else {
$.fn.fullpage.moveSectionDown();
}
});
});
// Abre Janela Modal
$("button").click(function(){
$("#modal").show();
//Pausa a Rolagem do conteúdo atrás da modal
$("body").stop().on({
'mousewheel':...