Closed
Description
Hi, I have a scrolling vertical section in 100% height of viewport for each section. Under last section i have a footer. I would set autoScrolling to false when i'm in last section because i need to set normal scrolling behaviour and then, in direction up, re-set autoScrolling to true.
My code:
var actualIndexSlide;
var totalSlides = $('main > section.section').length;
$('#main').fullpage({
// autoScrolling: true,
css3: true,
verticalCentered: false,
touchSensitivity: 15,
easing: 'easeInCirc',
normalScrollElements: '.fd-footer',
resize: false,
scrollingSpeed: 700,
afterRender: function(){
console.log("rendered");
$('main > section').css('height','auto');
},
afterResize: function(){
console.log("resize");
$('main > section').css('height','auto');
},
afterLoad: function(anchor, index){
actualIndexSlide = index;
// console.log("after load | anchor:"+anchor+" | index: "+index);
if(actualIndexSlide == totalSlides) {
// $.fn.fullpage.scrollOverflow(false);
$.fn.fullpage.setAutoScrolling(false);
}
},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
console.log("hereeee");
},
onLeave: function(index, newIndex, direction){
console.log("nuova "+newIndex);
console.log(index+"-"+totalSlides);
console.log(direction);
if(direction == "up" && index == totalSlides) {
// $.fn.fullpage.moveSectionUp();
$.fn.fullpage.moveTo(newIndex);
setTimeout(function() {
$.fn.fullpage.setAutoScrolling(true);
}, 1300);
}
}
});
When i'm coming from last slide in up direction to second-to-last i have a flickering.
I have 2 problem: afterSlideLoad not firing, never! And a blank page in google chrome on MAC.
Any solutions?
Thanks and sorry for my english! :)
Activity
[-]setAutoscrollin true/false[/-][+]setAutoscrolling true/false[/+]alvarotrigo commentedon Aug 4, 2014
It's not easy to do what you are looking for.
I would recommend you to try it by using an scrollable DIV in the last section to simulate the normal scrolling behavior and then, by using your own touch and mousewheel handler events, detect when it reaches the top of the DIV and then slide up.
You would also need to remove the handlers as well at some point.
If you have troubles doing so, I could help you with it for some price. But it should be done with external code to the plugin.
agaletta commentedon Aug 4, 2014
Thanks for reply.
It's a strange behaviour because it's seems ok right now only for flickering when i scroll-up from last to secont-to-last slide!
What about afterSlideLoad callback that is not firing, instead?
Thanks
[-]setAutoscrolling true/false[/-][+]Normal scrolling after one section[/+]sidonaldson commentedon Oct 26, 2014
Try this instead:
start by adding this to css: body{padding-right:17px;}
add a html footer outside of #fullPage div
then JS:
seems to work ok for me but I'm not testing it other than chrome
markadrake commentedon Nov 19, 2015
+1 for this functionality. I'm working on the implementation of a design where the brand wants to use fullpage.js to communicate it's message one "slide" at a time, but when you reach the last slide (which is full page of course) the footer of the site cannot be reached. I'd like to suggest this be a feature that's implemented into the core project.
alvarotrigo commentedon Nov 19, 2015
You can always use
fp-auto-height
for the footer as in this example.dangelion commentedon Dec 8, 2015
+1
rahulmax commentedon Jan 7, 2016
👍 You're right, @alvarotrigo I was looking for this functionality for the footer and
fp-auto-height
achieves this. Better experience than switching to normal scroll just for the footer.43 remaining items