Volle Höhe Schieberegler überspringen eine Folie

Question

Ich verwende fullPage.js, um eine volle Breite und Höhe Schieberegler für mehrere Vollbild-Folien erstellen. Also meine Website-Struktur ist wie

section#f01 
section#f02 
section#f03.scrollfix 
section#f04 

I section#f03.scrollfix überspringen wollen, während sie durch die Website zu scrollen. Beim Scrollen mit meiner Tastatur und/oder mit meinem Mausrad.

Answer 1

Demo online

Wenn Sie es auf Last entfernen möchten, verwenden Sie dann den afterRender Rückruf als ich hier mache:

$('#fullpage').fullpage({ 
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'], 

    afterRender: function() { 
     removeSection2(); 
    } 
}); 

function removeSection2() { 
    // Move section 2 after the las section 
    $('.fp-section:last').after($('#f02')); 

    //removing the internal class `fp-section` so fullPage.js won't recognise it and won't be able to scroll to it. 
    $('#f02').removeClass('fp-section'); 
} 

Falls Sie es zu einem anderen Zeitpunkt verwenden möchten, nur Rufen Sie die Funktion removeSection2 wann immer Sie wollen.

Wenn Sie wollen, dass es irgendwann wieder herzustellen zurück, könnten Sie diese andere Funktion:

function restoreSection2() { 
    // Move all next sections to before the active section 
    $('#f01').after($('#f02')); 
    $('#f02').addClass('fp-section'); 
} 

Answer 2

Ich bin nicht sicher, ich habe, was Sie erreichen wollen, so ist dies, wie ich wähle zu interpretieren, was Sie in Ihrer Frage schrieben:

Im anschaulichen Beispiel, dass Sie zur Verfügung gestellt, ist es möglich, die klicken auf jeder Folie, um diese Folie zu öffnen. Wenn dies geschehen ist, möchten Sie, dass Folie 8 übersprungen wird, wenn der Benutzer auf die Navigationstasten auf der Seite klickt oder die Bildlauftaste verwendet.

Wenn dies der Fall ist, macht das Hinzufügen des folgenden Listeners für onLeave einer Folie in Kombination mit der CSS im unteren Teil die Folie # 8 immer dann aus, wenn die Klasse ".scrollfix" vorhanden ist (vielleicht sollte sie umbenannt werden) „.scrollskip“ oder etwas ähnliches):

$("#fullpage").fullpage({ onLeave: function(index, nextIndex, direction) { 
    setTimeout(function() { 
    var skip_section = $(".scrollfix").length > 0; 
    if (nextIndex === 8 && skip_section) { 
     if (direction === "down") { 
     $("#fullpage").fullpage.moveSectionDown(); 
     } else { 
     $("#fullpage").fullpage.moveSectionUp(); 
     } 
    } 
    },1); 
} }) 

die CSS muss aktualisiert werden, um die Folie zu verstecken vollständig und nicht nur macht es unsichtbar:

.scrollfix { 
    display: none!important; 
} 

Einfügen des JS-Code oben in dev Tools Konsole während Sie auf Ihrer Beispielseite sind und th machen bei kleinen Änderungen an der Scrollfix führt zu dem Verhalten, das ich denke, Sie suchen. Da Sie bereits einen "onLeave" -Ereignislistener in Ihrem Code haben, wird durch das Hinzufügen dieses Fixes in den Entwicklungstools das Standardverhalten gebrochen, aber Sie sollten den Code an der richtigen Stelle hinzufügen können, damit beide gleichzeitig funktionieren.