Hallo liebe Community,
ich habe ein Problem, welches sich allem Anschein nur mit Javascript lösen lässt. Was Javascript angeht bin ich ein blutiger Anfänger und hoffe sehr Ihr könnt mir helfen. Ich habe seit gestern sehr viel Zeit Energie und Nerven daran verloren.
Link zur Seite
Das Ziel ist es Den Header auf der ersten Seite bzw. dem ersten Scroll auszublenden. Also nach dem ersten Scroll einzublenden und zu fixieren.
Problematisch wird es nur sehr wenn das Fullpage.js Plugin in’s Spiel kommt. Dieses liest die Fenstergröße aus und skaliert meine Haupt Container entsprechend. Außerdem steuert es die Seitennavigation also auch den Scroll und gibt mir eine Struktur vor.
Aufgrund der Struktur kann ich das Problem nicht mit CSS über den Z-Index lösen. Falls Ihr da aber noch ne Idee habt, immer gerne her damit! :P
Ich habe seit dem einiges mit Javascript oder jQuery versucht wie z.B:
Beim Scrollen oder erreichen von bestimmten Pixel Werten, Objekten zusätzliche Klassen zu vergeben. Das hat nicht geklappt weil mein Onepage Plugin (fullpage.js) die Hauptsection nach der Fenstergröße ausrichtet und nur die Inhalte in dem Container verschiebt.
Ich habe auch versucht nach einem Scroll die Klassen meiner Container zu überprüfen und im Falle einer Übereinstimmung weitere Klassen hinzuzufügen und zu entfernen. (fullpage.js) fügt der aktiven Section die klasse „active“ hinzu. Das ist auch daran gescheitert, dass das Scrollen nicht erkannt wurde.
Ich habe auch diverse Plugins wie sticky.js, headassive .js, appear etc. ausprobiert alle Ohne erfolg.
Ich glaube am einfachsten wäre ein Code wie folgt. Wenn (#section1) hat Klasse = („active“) dann (header) füge Klasse hinzu („block“) und entferne klasse („none“). (Oder direkter Eingriff in das CSS mit display:none; und display:block;)
Die Frage ist nur wie man die Anweisung auslöst. Vielleicht funktioniert es wenn man den es trotzdem per Scroll auslösen lässt nur diesen Scroll auch auf den HauptContainer bezieht. Vielleicht hat es sich bis jetzt immer auf den Body bezogen. Alternativ könnte ich mir auch ein MouseOut vorstellen welches sich auf die 1. Section bezieht. Da stellt sich die Frage nur wie es für Mobile Nutzer aussieht.
Link zum Fullpage Plugin
Download meines Grundgerüstes
Wenn ihr irgendeine Lösung parat habt wie ich den Header nicht auf jeder Seite(auf jedem Slide) Neuladen muss sondern ihn nur einmal im Dokument angelegt habe und nur auf der ersten Seite nicht anzeigen lasse – egal wie – nur her damit!!!!! Wäre wirklich überaus dankbar und würde im Gegenzug meine Zeit und Kentnisse in HTML und CSS anbieten. Bin echt am Verzweifeln und habe massig Zeit darein investiert und hoffe sehr ihr könnt mir helfen!
Vielen Lieben Dank und liebe Grüße!
Clemens
ich habe ein Problem, welches sich allem Anschein nur mit Javascript lösen lässt. Was Javascript angeht bin ich ein blutiger Anfänger und hoffe sehr Ihr könnt mir helfen. Ich habe seit gestern sehr viel Zeit Energie und Nerven daran verloren.
Link zur Seite
Das Ziel ist es Den Header auf der ersten Seite bzw. dem ersten Scroll auszublenden. Also nach dem ersten Scroll einzublenden und zu fixieren.
Problematisch wird es nur sehr wenn das Fullpage.js Plugin in’s Spiel kommt. Dieses liest die Fenstergröße aus und skaliert meine Haupt Container entsprechend. Außerdem steuert es die Seitennavigation also auch den Scroll und gibt mir eine Struktur vor.
Aufgrund der Struktur kann ich das Problem nicht mit CSS über den Z-Index lösen. Falls Ihr da aber noch ne Idee habt, immer gerne her damit! :P
Ich habe seit dem einiges mit Javascript oder jQuery versucht wie z.B:
Beim Scrollen oder erreichen von bestimmten Pixel Werten, Objekten zusätzliche Klassen zu vergeben. Das hat nicht geklappt weil mein Onepage Plugin (fullpage.js) die Hauptsection nach der Fenstergröße ausrichtet und nur die Inhalte in dem Container verschiebt.
Ich habe auch versucht nach einem Scroll die Klassen meiner Container zu überprüfen und im Falle einer Übereinstimmung weitere Klassen hinzuzufügen und zu entfernen. (fullpage.js) fügt der aktiven Section die klasse „active“ hinzu. Das ist auch daran gescheitert, dass das Scrollen nicht erkannt wurde.
Ich habe auch diverse Plugins wie sticky.js, headassive .js, appear etc. ausprobiert alle Ohne erfolg.
Ich glaube am einfachsten wäre ein Code wie folgt. Wenn (#section1) hat Klasse = („active“) dann (header) füge Klasse hinzu („block“) und entferne klasse („none“). (Oder direkter Eingriff in das CSS mit display:none; und display:block;)
Die Frage ist nur wie man die Anweisung auslöst. Vielleicht funktioniert es wenn man den es trotzdem per Scroll auslösen lässt nur diesen Scroll auch auf den HauptContainer bezieht. Vielleicht hat es sich bis jetzt immer auf den Body bezogen. Alternativ könnte ich mir auch ein MouseOut vorstellen welches sich auf die 1. Section bezieht. Da stellt sich die Frage nur wie es für Mobile Nutzer aussieht.
Link zum Fullpage Plugin
Download meines Grundgerüstes
Wenn ihr irgendeine Lösung parat habt wie ich den Header nicht auf jeder Seite(auf jedem Slide) Neuladen muss sondern ihn nur einmal im Dokument angelegt habe und nur auf der ersten Seite nicht anzeigen lasse – egal wie – nur her damit!!!!! Wäre wirklich überaus dankbar und würde im Gegenzug meine Zeit und Kentnisse in HTML und CSS anbieten. Bin echt am Verzweifeln und habe massig Zeit darein investiert und hoffe sehr ihr könnt mir helfen!
Vielen Lieben Dank und liebe Grüße!
Clemens
[FRAGE] Header bei Scroll Einblenden und fixieren
Aucun commentaire:
Enregistrer un commentaire