fullpage js - désactive la navigation vers la page d'atterrissage

Question

J'utilise fullPage JS sur mon site Web, et j'ai également activé la navigation du côté droit de la page. J'ai une page d'atterrissage, et une fois défilée, je ne veux pas permettre aux utilisateurs de pouvoir revenir à la page d'atterrissage. Pour cette exigence, je suis confronté à deux problèmes:

1. J'ai désactivé le défilement sur la deuxième page afin que l'utilisateur ne peut pas défiler vers le haut. Mais j'ai remarqué que sur défilement très rapide l'utilisateur peut toujours atteindre la page de destination. Quelle est la solution pour cela?

2. J'ai activé les points de navigation sur le site, en utilisant ce que je peux faire défiler jusqu'au sommet. Comment puis-je désactiver la navigation sur le premier point?

Lien vers le site: https://rimildeyjsr.github.io/st.anthony

Je joins également un lien vers le dépôt GitHub: https://github.com/rimildeyjsr/st.anthony

options utilisées dans le plug-in:

$('#fullpage').fullpage({ 
        //names for the anchors of the pages 
        anchors:['welcome','home','administration_page','faculty_section','staff_section'], 
        navigation: true, 
        navigationPosition: 'right', 
        fixedElements: '#toggle,#overlay', 

        afterLoad : function(anchorLink,index) { 
         //after loading a section, perform these functions 

         if (index == 1 || anchorLink == 'welcome'){ 
          //show the other sections now that the page has loaded 
          $('#fp-nav').hide(); 
          $('#section1').show(); 
          $('#section2').show(); 
          $('#section3').show(); 
          $('#section4').show(); 
          $('#toggle').hide(); 

         } 
         if (index == 2 || anchorLink == 'home'){ 
          $('#fp-nav').show(); 
          $('#toggle').show(); 
          if (window.innerWidth < 480) { 
           $('.school-logo2').fadeIn(); 
          } 
          $('.school-name').addClass('come-in'); 
           slideEffect(); 

          $.fn.fullpage.setAllowScrolling(false,'up'); 
          $.fn.fullpage.setKeyboardScrolling(false, 'up'); 
         } 

         if(index == 3 || anchorLink == 'administration_page'){ 
          $('#fp-nav').show(); 
          $('#toggle').show(); 
          $('.offscreen-logo').addClass('come-in-logo').one(animationEnd,function(){ 
           display(); 
          }); 
          $.fn.fullpage.setAllowScrolling(true,'up'); 
          $.fn.fullpage.setKeyboardScrolling(true, 'up'); 
         } 

         if(index == 4 || anchorLink == 'faculty_section') { 
          $('#fp-nav').show(); 
          $('#toggle').show(); 
          $('#section3 .section-heading').addClass('animated fadeInDown'); 
          $('#section3 .card').addClass('animated fadeInUp'); 
          $.fn.fullpage.setAllowScrolling(true,'up'); 
          $.fn.fullpage.setKeyboardScrolling(true, 'up'); 
         } 
         if(index == 5 || anchorLink == 'staff_section') { 
          $('#fp-nav').show(); 
          $('#toggle').show(); 
          $('#section4 .section-heading').addClass('animated fadeInDown'); 
          $('#section4 .card').addClass('animated fadeInUp'); 
          $.fn.fullpage.setAllowScrolling(true,'up'); 
          $.fn.fullpage.setKeyboardScrolling(true, 'up'); 
         } 
        } 

       }); 

Answer 1

Je suis impossible de reproduire le numéro 1, dans lequel vous dites que vous pouvez faire défiler rapidement et atteindre la première diapositive. J'ai essayé de faire défiler aussi vite que possible dans les deux Chrome & Safari sur le bureau et n'a pas pu atteindre la première diapositive après le défilement initial vers le bas. Si vous cherchez à masquer le premier point de pagination, vous pouvez cibler le li en utilisant :first-of-type. Dans votre cas, vous pouvez ajouter le code suivant:

#fp-nav ul li:first-of-type { display: none; }

Si vous cherchez à le garder, mais juste désactiver la fonctionnalité, vous pouvez utiliser pointer-events, dans ce cas, vous pouvez utiliser:

#fp-nav ul li:first-of-type { pointer-events: none; }