Anpassen von fullpage.js, um Abschnitte dynamisch zu überspringen

Question

Die Frage ist einfach, aber ich bin nicht in der Lage, ein Skript für mich zu machen, was ich brauche ... Ich benutze tatsächlich ein Skript (fullpage.js) wer schalte einige Klassen in einen Container um (in meinem Fall wechsle ich von fp-viewing-1 zu fp-viewing-x), wenn du zwischen den Abschnitten nach unten/oben scrollst. Ich muss ein Skript erstellen, das von diesem Container hört und eine neue Klasse in ein div umschaltet, NUR wenn eine Klasse (in meinem Fall fp-viewing-3) zu diesem Container hinzugefügt wird (natürlich aus dem Skript fullpage.js).

Jeder Weg, es zu machen?

Answer 1

Dies ist die Lösung für mein Problem. Fullpage funktioniert wie vorgesehen mit Ausnahme von Abschnitt 2. Abschnitt 2 kann nur scrollen verwendet werden, das Skript ignoriert es beim Scrollen nach oben.

$(document).ready(function() { 

    $('#application').fullpage({ 

    onLeave: function(index, nextIndex, direction){ 
     var destinationToIgnore = $('.fp-section').hasClass('ignore'); 

     if(destinationToIgnore && direction =='up'){ 
      var destination = nextIndex = 1 
      $.fn.fullpage.moveTo(destination); 

     } 
    }, 


    afterLoad: function(anchorLink, index){ 
     var loadedSection = $(this); 

     if(index !== 1){ 
     $('.section-intro').removeClass('ignore');    
     } 
     if(index == 3){ 
     $('.section-intro').addClass('ignore');    
     } 

    } 

    }); 


}); 

Answer 2

Ich brauche ein Skript zu machen, die

aus diesem Behälter hören, die nicht der richtige Weg ist für ihn zu gehen.

Wenn Sie die Statusklasse verwenden möchten, erstellen Sie einfach eine neue Klasse basierend auf den vorherigen wie erläutert in this fullpage.js tutorial.

Erstellen Sie eine bedingte CSS-Klasse, die nur angewendet wird, wenn ihre Elternklasse Ihrer Anforderung entspricht.

So etwas wie dies, zum Beispiel, würde die red Farbe Element mit myClass nur gelten, wenn Sie in Abschnitt 1 Folie 0.

.fp-viewing-1-0 .myClass{ 
    color: red; 
} 

Having sind:

<div id="fullpage"> 
    <div class="section"></div> 
    <div class="section myClass"></div> 
    <div class="section"></div> 
<div> 

Wenn für einige anderen Grund (Verwendung von Plugins etc) müssen Sie wirklich die Klasse dynamisch hinzufügen, dann gehen Sie für Fullpage.js Callbacks onLeave oder afterLoad:

$('#fullpage').fullpage({ 
    onLeave: function(index, nextIndex, direction){ 
     var destination = $('.section').eq(nextIndex - 1); 
     destination.find('.my-element').addClass('myClass');    
    } 
});