Contao 4: Navigation beim Runterscrollen verstecken, beim Hochscrollen anzeigen

[Schnippel]

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?

[07alex07]

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.

[Schnippel]

Diese Datei bindest du dann in einem j_script.html5 Template ein.
Das Template sollte im Contao-Backend im Thema geladen werden.

Wie genau macht man das?

Nimmt man dazu ein vorhandenes Template, z.b. j_colorbox.html5 und ändert man dieses ab,
so wie hier?

Unbenannt-1.jpg

Wenn dieser Weg geht (siehe Foto), wie müssten dann das mit der "colorbox" verändert werden?
Siehe hier:

// 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>

[07alex07]

Erstell dir eine leere Datei mit dem Namen zB. j_script.html im templates ordner.

Inhalt der Datei könnte so aussehen

<?php
$GLOBALS['TL_JAVASCRIPT'][] = "dein/Pfad/zu/Datei.js";
?>

Dieses Template bindest du dann im Seitenlayout ein.

[Socki]

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

[Tompaianer]

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/

[07alex07]

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

Das würde auch gehen. Man hat dann im Quelltext mehrere Einbindungen.

Siehe hierzu folgenden Thread
https://community.contao.org/de/show...zusammenfassen

[Schnippel]

Inhalt der Datei könnte so aussehen
<?php
$GLOBALS['TL_JAVASCRIPT'][] = "dein/Pfad/zu/Datei.js";
?>

Das würde dann so bei mir aussehen:

<?php
$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/scrolling.js';
?>

Das funktioniert aber nicht.
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:

<?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>

Ist das aber nicht doppeltgemoppelt?

[07alex07]

wieso musst du diesen nochmal in das Template einfügen?
Dafür hast du doch deine Datei script.js

[Schnippel]

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.

Ich habe folgendes gemacht:

Schritt 1:
Eine Datei angelegt mit folgendem 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');
   };
}); 

Diese Datei hat den Namen scrolling.js und liegt im Ordner files/js/, sodas der Pfad lautet files/js/scrolling.js

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:

<?php
$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/scrolling.js';
?>

Schritt 3:
Im Layout dieses aktiviert.

Ergebnis, ist, daß es nicht funtkioniert.
Was mach ich da noch falsch?

[07alex07]

Ist dein Verzeichnis /files/js/ öffentlich?
Bekommt du eine Fehlermeldung in der Console?

[Schnippel]

Folgender Lösungsansatz funktioniert:

Statt wie in Schritt 1 die Datei scrolling.js anzulegen,
geleich in Schritt 2 den Code eingeben:

<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> 

also OHNE

 <?php
$GLOBALS['TL_JAVASCRIPT'][] = 'files/js/scrolling.js';
?>

[Schnippel]

Ist dein Verzeichnis /files/js/ öffentlich?

Das war mein Problem, hab daran überhaupt nicht gedacht, dass das ja jetzt in Contao 4 gemacht werden muß.
Vielen Dank :-)

Jetzt geht es...

[Schnippel]

Hi Leute,

Für das Verhalten des Headers beim Scrollen nutze ich dieses Beispiel hier:

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/

Dazu verwende ich folgenden 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