Verwendung: Main Navigation beim hochscrollen einblenden

mike's Avatar

mike

04 Dec, 2020 06:23 PM

Produkt: Tao Contao
Contao-Version: 4.9.9

Wäre es möglich dass die Hauptnavigation ab einer gewissen scrolltiefe verschwindet und erst beim hochscrollen wieder eingeblendet wird?

Vielen Dank im voraus!

  1. Support Staff 1 Posted by RockSolid Theme... on 07 Dec, 2020 08:55 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Eine solche Funktion ist im Tao-Theme selbst nicht vorgesehen.

    Sie können dafür z. B. folgenden JavaScript-Code einsetzen:

    jQuery(window).on('scroll resize load', function() {
        if ((window.pageYOffset || document.documentElement.scrollTop || 0) > 1000) {
            jQuery('.page-header').css('display', 'none');
        }
        else {
            jQuery('.page-header').css('display', '');
        }
    });
    

    Verändern Sie dabei den Wert 1000 auf die gewünschte Scrolltiefe.

  2. 2 Posted by mike on 07 Dec, 2020 03:13 PM

    mike's Avatar

    Vielen Dank!

    Nun ist es so dass die Hauptnavigation erst wieder der eingestellten Scrolltiefe auftaucht und nicht direkt beim wechsel der Scrollrichtung.
    Ich habe ein Beispiel gefunden dass ich gerne verwenden würde nur leider weiß ich nicht wie der CSS-Code dann aussehen muss.
    https://blog.kulturbanause.de/2017/05/navigation-runterscrollen-ver...

    Edit: habe das verlinkte Beispiel nun damit hinbekommen:

    .header-navigation {
       transition: transform .25s .1s ease-in-out;
    }
    .down .header-navigation {
       transform: translate3d(0, -100px, 0);
    }
    

    nun weiß ich aber nicht wie ich das jetzt erst ab einer gewissen Scrolltiefe aktiviere

    Edit 2:
    Learning by doing...
    jetzt funktioniert es.

         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() <= 1000) {
         $('body').removeClass('down');
       };
    });
    

    Vielen Dank für all die Hilfe!

  3. Support Staff 3 Posted by RockSolid Theme... on 07 Dec, 2020 04:20 PM

    RockSolid Themes's Avatar

    Wenn Sie den JavaScript-Code aus dem verlinkten Beispiel verwenden, können Sie dafür folgenden CSS-Code einsetzen:

    .page-header {
        transition: transform .25s .1s ease-in-out;
    }
    body.down .page-header {
        transform: translateY(-100%);
    }
    
  4. 4 Posted by mike on 07 Dec, 2020 04:38 PM

    mike's Avatar

    Danke!

    Bei dem CSS-Code meldet der Quelltexteditor:
    Element (body.down) is overqualified. Just use .down without element name.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac