-
Notifications
You must be signed in to change notification settings - Fork 7.2k
Closed
Labels
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! :)
arturparkhisenko, yapple, ssundarr3, vikrantgharat, terremoth and 2 more
Metadata
Metadata
Assignees
Labels
Projects
Milestone
Relationships
Development
Select code repository
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.28 remaining items
s10wen commentedon Mar 3, 2018
I think I have a similar issue. I have multiple slides, then I'd like 'normal' scroll for a large footer (that allows all the content to be shown).
The following demo works well for a small footer:
https://alvarotrigo.com/fullPage/examples/autoHeight.html#3rdPage
I've created a demo for the issue I'm having with the large footer:
https://codepen.io/s10wen/pen/eVoMga
Thanks in advance for any help :)
alvarotrigo commentedon Mar 4, 2018
@s10wen use
scrollOverflow:true
. Then place all your "normal" content in your last section. That will emulate the behaviour you want.hybrid
andfp-normal-scroll
are not supported features.s10wen commentedon Mar 5, 2018
@alvarotrigo jackpot! Is there a way to manipulate the
.fp-nav
as so:.section .header-slide
= no nav.section .slide-one
= nav starts on 1 (and shows 3).section .slide-two
= nav 2 (and shows 3).section .slide-one
= nav ends on 3 (and shows 3).section .footer-slide
= no navp.s. I found #1110 but it looks like the demo is a 404 http://jsfiddle.net/97tbk/512/
alvarotrigo commentedon Mar 5, 2018
Make use of fullPage.js state classes or callbacks for that.
Check this video tutorial I did regarding css3 conditions based on fullpage.js state classes.
taraskhvyl commentedon Sep 15, 2018
hi. this is actual question. any updates on it? how can i make auto scroll from 2-nd section?
thank you
alvarotrigo commentedon Sep 15, 2018
If there were any, you'd see my comment on it.
But you can't see any right? Then there's none :)
taraskhvyl commentedon Sep 17, 2018
I can share my fast solution for it. Maybe it will help somebody :)
`
let allowScrollTop = false;
`
maartenvanhunsel commentedon Feb 2, 2019
@taraskhvyl Do you have an example to show?
alvarotrigo commentedon Apr 11, 2022
This is finally possible now in v4! 🥳 👯 🕺 🎈
It took 7 years and a half but we got there!! :)
I'll be adding examples soon.
alekskravchenko commentedon Apr 18, 2022
Hey @alvarotrigo, can you please explain how to implement this feature in v4?
alvarotrigo commentedon Apr 18, 2022
Sure, just add any content after fullPage.js and that's it :)
You can see a working example on the examples folder:
https://github.com/alvarotrigo/fullPage.js/blob/master/examples/scroll-after-fullpage.html