Hi Leute,
Wie lässt sich eine Navigation beim Runterscrollen verstecken und beim beim Hochscrollen wieder anzeigen?
Hier ein Beispiel:
https://media.kulturbanause.de/blog/...roll-down.html
Die technische Erklärung dazu hier:
https://blog.kulturbanause.de/2017/0...llen-anzeigen/
Was muß nun in Contao 4 wie wo eingebunden werden?
Müssen Templates veränder werden?
Wie wird das JavaScript (jQuery) eingebunden?
Was muß im BA > Layout bei jQuery-Quelle eingestellt werden?
Erstell dir im Verzeichnis files/js eine neue Datei z.B. script.js
Darin sollte der Inhalt vom Link vorkommen. Diese Datei bindest du dann in einem j_script.html5 Template ein.
Das Template sollte im Contao-Backend im Thema geladen werden.
Beim Erstellen der Navigation gibst du deiner Header Navigation eine eindeutige klasse bzw. ID mit, mit dieser Klasse bzw. ID kannst die CSS-Eigenschaften definieren.
Wie genau macht man das?Zitat:
Diese Datei bindest du dann in einem j_script.html5 Template ein.
Das Template sollte im Contao-Backend im Thema geladen werden.
Nimmt man dazu ein vorhandenes Template, z.b. j_colorbox.html5 und ändert man dieses ab,
so wie hier?
Anhang 19767
Wenn dieser Weg geht (siehe Foto), wie müssten dann das mit der "colorbox" verändert werden?
Siehe hier:
PHP-Code:// Add the colorbox style sheet
$GLOBALS['TL_CSS'][] = 'assets/colorbox/css/colorbox.min.css|static';
?>
<script src="<?= TL_ASSETS_URL ?>assets/colorbox/js/colorbox.min.js"></script>
Erstell dir eine leere Datei mit dem Namen zB. j_script.html im templates ordner.
Inhalt der Datei könnte so aussehen
Dieses Template bindest du dann im Seitenlayout ein.Zitat:
<?php
$GLOBALS['TL_JAVASCRIPT'][] = "dein/Pfad/zu/Datei.js";
?>
Darf ich fragen wieso ein Extra template?
Würde es nicht auch einfach reichen den JS-code in das entsprechende Seitenlayout (Custom JavaScript code ) zu packen?
Gruss Socke
Ich habe die .js in der Dateiverwaltung und binde diese über eigener JavaScript Code ein (files/js/...) Dann noch mit CSS gestalten fertig. Hier http://rausch.tompa-webdesign.de/
Das würde auch gehen. Man hat dann im Quelltext mehrere Einbindungen.Zitat:
Zitat von Socki
Siehe hierzu folgenden Thread
https://community.contao.org/de/show...zusammenfassen
Das würde dann so bei mir aussehen:Zitat:
Inhalt der Datei könnte so aussehen
<?php
$GLOBALS['TL_JAVASCRIPT'][] = "dein/Pfad/zu/Datei.js";
?>
Das funktioniert aber nicht.PHP-Code:<?php
$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/scrolling.js';
?>
Ich muß den Code, der in der scrolling.js steht, dann nochmal zusätzlich in dem Template einbinden, was dann komplett so wie hier ausschaut:
Ist das aber nicht doppeltgemoppelt?PHP-Code:<?php
$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/scrolling.js';
?>
<script>
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
if (!$('body').hasClass('down')) {
$('body').addClass('down');
}
} else {
$('body').removeClass('down');
}
lastScrollTop = st;
if ($(this).scrollTop() <= 0) {
$('body').removeClass('down');
};
});
</script>
wieso musst du diesen nochmal in das Template einfügen?
Dafür hast du doch deine Datei script.js
Wenn ich dies nicht nochmal eintrage, funktioniert das Ganze nicht.Zitat:
wieso musst du diesen nochmal in das Template einfügen?
Dafür hast du doch deine Datei script.js
Ich habe folgendes gemacht:
Schritt 1:
Eine Datei angelegt mit folgendem Code
Diese Datei hat den Namen scrolling.js und liegt im Ordner files/js/, sodas der Pfad lautet files/js/scrolling.jsPHP-Code:var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
if (!$('body').hasClass('down')) {
$('body').addClass('down');
}
} else {
$('body').removeClass('down');
}
lastScrollTop = st;
if ($(this).scrollTop() <= 0) {
$('body').removeClass('down');
};
});
Schritt 2:
Dann habe ich ein Template genommen, es umbenannt in "js_scrolling_nav.html5", alle Inhalte darin gelöscht und
den folgenden Code eingegeben:
Schritt 3:PHP-Code:<?php
$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/scrolling.js';
?>
Im Layout dieses aktiviert.
Ergebnis, ist, daß es nicht funtkioniert.
Was mach ich da noch falsch?
Ist dein Verzeichnis /files/js/ öffentlich?
Bekommt du eine Fehlermeldung in der Console?
Folgender Lösungsansatz funktioniert:
Statt wie in Schritt 1 die Datei scrolling.js anzulegen,
geleich in Schritt 2 den Code eingeben:
also OHNEPHP-Code:<script>
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
if (!$('body').hasClass('down')) {
$('body').addClass('down');
}
} else {
$('body').removeClass('down');
}
lastScrollTop = st;
if ($(this).scrollTop() <= 0) {
$('body').removeClass('down');
};
});
</script>
PHP-Code:<?php
$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/scrolling.js';
?>
Das war mein Problem, hab daran überhaupt nicht gedacht, dass das ja jetzt in Contao 4 gemacht werden muß.Zitat:
Ist dein Verzeichnis /files/js/ öffentlich?
Vielen Dank :-)
Jetzt geht es...
Hi Leute,
Für das Verhalten des Headers beim Scrollen nutze ich dieses Beispiel hier:
Dazu verwende ich folgenden Code:Zitat:
Wie lässt sich eine Navigation beim Runterscrollen verstecken und beim beim Hochscrollen wieder anzeigen?
Hier ein Beispiel:
https://media.kulturbanause.de/blog/...roll-down.html
Die technische Erklärung dazu hier:
https://blog.kulturbanause.de/2017/0...llen-anzeigen/
PHP-Code:var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
if (!$('body').hasClass('down')) {
$('body').addClass('down');
}
} else {
$('body').removeClass('down');
}
lastScrollTop = st;
if ($(this).scrollTop() <= 0) {
$('body').removeClass('down');
};
});
Jetzt meine Frage:
Was muß an dem Code wie / wo verändert oder hinzugefügt werden,
damit
A) Das Scrollverhalten erst eintritt, nachdem man z.B. schon 300px runtergescrollt hat (in der DEMO der grüne Header also nicht gleich verschwindet)
und
B) beim wieder Hochscrollen das Scrollverhalten erst wieder rückgängig gemacht wird, wenn man kurz vor dem oberen Rand wieder angelangt ist, z.B. 100px vor TOP.
( in der Demo also der grüne Header nicht gleich beim hochscrollen einblendet, sondern dieser erst erscheint, wenn man 100px vor dem oberen Rand steht.)
Wie lässt sich das umsetzen?
Nachtrag:
Hier ein Beispiel, wie die Navigation bzw. der Header reagieren soll:
http://t3n.de/
1 Erst bliebt der große Header stehen,
2 dann blendet er aus und nur die schmale horizontale Navigation ist oben zu sehen
3 beim Rückscrollen (also wieder hoch) bleibt die schmale Navigation aus 2 erstmal noch stehen.
4 erst am oberen Ende wird der große Header wieder eingeblendet