Fullpage.js extension with footer which is not on full page
by Milad Meidanshahi
HTML
<div id="fullpage">
<div class="section " id="section0">
<h1>Section 1</h1>
</div>
<div class="section" id="section1">
<div class="intro">
<h1>Section 2</h1>
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Section 3</h1>
</div>
</div>
<div class="section" id="section-footer">
<div id="footer-text">
<p>Yes, this is the footer. Enjoy!</p>
<p>Yes, this is the footer. Enjoy!</p>
<p>Yes, this is the footer. Enjoy!</p>
</div>
</div>
</div>
CSS
.section
{
border: 1px solid red;
}
#section-footer #footer-text
{
width: 80%;
height: auto;
margin: 0 auto;
padding: 20px 0;
}
#section-footer p
{
text-align: center;
}
p
{
margin: 0 0 10px;
}
JavaScript
(function($) {
$.fn.fullpage = function(options) {
// Create some defaults, extending them with any options that were provided
options = $.extend({
//navigation
'menu': false,
'anchors':[],
'navigation': false,
'navigationPosition': 'right',
'navigationColor': '#000',
'navigationTooltips': [],
'slidesNavigation': false,
'slidesNavPosition': 'bottom',
'scrollBar': false,
//scrolling
'css3': true,
'scrollingSpeed': 700,
'autoScrolling': true,
'easing': 'easeInQuart',
'easingcss3': 'ease',
'loopBottom': false,
'loopTop': false,
'loopHorizontal': true,
'continuousVertical': false,
'normalScrollElements': null,
'scrollOverflow': false,
'touchSensitivity': 5,
'normalScrollElementTouchThreshold': 5,
//Accessibility
'keyboardScrolling': true,
'animateAnchor': true,
'recordHistory': true,
//design
'controlArrows': true,
'controlArrowColor': '#fff',
"verticalCentered": true,
'resize': true,
'sectionsColor' : [],
'paddingTop': 0,
'paddingBottom': 0,
'fixedElements': null,
'responsive': 0,
//Custom selectors
'sectionSelector': '.section',
'slideSelector': '.slide',
//events
'afterLoad': null,
'onLeave': null,
'afterRender': null,
'afterResize': null,
'afterReBuild': null,
'afterSlideLoad': null,
'onSlideLeave': null
}, options);
displayWarnings();
//easeInQuart animation included in the plugin
$.extend($.easing,{ easeInQuart: function (x, t, b, c, d) { return c*(t/=d)*t*t*t + b; }});
//Defines the delay to take place before being able to scroll to the next section
//BE CAREFUL! Not recommened to change it under 400 for a good behavior in laptops and
//Apple devices (laptops, mouses...)
var scrollDelay = 600;
$.fn.fullpage.setAutoScrolling = function(value, type){
setVariableState('autoScrolling', value, type);
var element = $('.fp-section.active');
if(options.autoScrolling &&...