J’utilise fullpagejs et AOS pour faire apparaître des div du bas de la page en défilement (ou du moins, c’est ce que j’aimerais réaliser)

Malheureusement, ça ne marche pas.

Oui, j’ai lu les sections FAQ de fullpage et oui, la scrollbar est définie sur true et le autoscroll est défini sur false .

Ma configuration est la suivante:

• Comment rendre le lecteur vidéo personnalisé applicable à plusieurs vidéos?
• À quoi sert l’option fullpage.js normalScrollElementTouchThreshold?
• fullpage.js ajoute un effet de curseur de fondu
• FullPage.js – Ajoute une classe active à l’ancre de menu lorsque la section ne correspond pas
• CSS: changer les flèches sur toute la page JS?

 
 
 
 {someOtherContent}  
test
 
 
 
 
 
 $('#test').fullpage({ lazyLoading: false, lockAnchors: true, scrollingSpeed: 300, fitToSection: false, easing: 'easeInOutCubic', easingcss3: 'ease', loopHorizontal: false, offsetSections: false, resetSliders: false, scrollOverflow: true, scrollOverflowReset: true, touchSensitivity: 0, bigSectionsDestination: top, keyboardScrolling: false, animateAnchor: false, recordHistory: true, controlArrows: false, verticalCentered: true, responsiveWidth: 0, responsiveHeight: 0, sectionSelector: '.section', slideSelector: '.slide', scrollBar:true //events afterLoad: function (anchor, index( { initArrowEventListener() } 

la fonction d’événement afterLoad initialise simplement les liens de mon menu (basés sur l’index des diapositives) et la seule partie pertinente est que j’initialise AOS lorsque je clique sur un lien spécifique (car je souhaite que la bibliothèque ne fonctionne que sur une page spécifique et pas partout.

Donc, je charge la page, cliquez pour naviguer sur la page de curseur que je veux, la fonction est appelée (le journal de la console le vérifie, ainsi que les classes AOS sont appliquées à la div appropriée), je peux voir la barre de défilement, mais rien, le div ne surgit pas du bas.

Une idée de ce que je fais mal ici? Merci

Ce stylo illustre le même problème. Cliquez sur “A propos de” (la fonction qui initialise AOS s’appelle car celle pour le titre fonctionne également), faites défiler vers le bas et vous verrez beaucoup d’espace blanc. Si vous inspectez la console, aos est initialisé sur l’élément (ses classes sont appliquées) mais l’élément ne glisse jamais vers le haut.

• Désactiver fullpage.js sur les appareils mobiles (tactiles)
• jquery.fullPage.js comment activer le défilement dans un div sans affecter le défilement des sections
• Rendre les images de fond réactives – fullpage.js
• Fullpage.js Slide horizontal on scroll
• Ajout ou suppression de sections / diapositives dans fullPage.js après l’initialisation

 $('[data-aos]').each(function(){ $(this).addClass("aos-init"); }); 

 $('#fullpage').fullpage({ slidesNavigation: true, controlArrows: false, onLeave: function(){ $('.section [data-aos]').each(function(){ $(this).removeClass("aos-animate") }); }, onSlideLeave: function(){ $('.slide [data-aos]').each(function(){ $(this).removeClass("aos-animate") }); }, afterSlideLoad: function(){ $('.slide.active [data-aos]').each(function(){ $(this).addClass("aos-animate") }); }, afterLoad: function(){ $('.section.active [data-aos]').each(function(){ $(this).addClass("aos-animate") }); }}); 

 
 
 
 
 
fade me up!
 
 
 
 
 
 
 
 
zoom me in!
 
 
 
 
 
 
 
flip me down!