fullPage.js vertical navigation arrows

by Salustiano Silva

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>
            <h2>Muito texto para forçar o scroll</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet pellentesque quam. Nulla eu eros metus. Suspendisse sollicitudin sollicitudin urna, interdum cursus eros elementum vel. Praesent ac diam tortor. Aenean vel viverra nisl, nec dapibus mauris. Vivamus a ex imperdiet, rhoncus metus ac, dignissim urna. Phasellus at nisi elit. Donec at porttitor metus, sed elementum massa. Proin vel nulla eu lectus congue scelerisque vel elementum ex. Pellentesque sodales fringilla dui quis imperdiet. Morbi ornare ligula mauris. Nulla luctus eget lectus ac vestibulum. Sed molestie cursus magna sed fringilla.</p>
            
            <p>Curabitur fermentum nisl at molestie ultrices. Proin tincidunt libero vel dolor tempor hendrerit. Pellentesque ultrices magna ante. Proin ut orci justo. Praesent in mi magna. Curabitur interdum, elit et aliquet laoreet, nunc erat tincidunt arcu, sit amet convallis dolor sapien non justo. Ut sed aliquam odio, vitae placerat diam. Maecenas at interdum nunc, porta porttitor purus. Sed tortor nunc, consequat quis finibus vel, tincidunt a massa.</p>
            
            <p>Nunc rhoncus...

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;overflow:auto;}
.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">&#8593;</span>')
            .append('<span class="next">&#8595;</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();
    $("html,body").css({"overflow":"hidden"});
});
//Fecha Janela...