Contao-Camp 2024
Ergebnis 1 bis 28 von 28

Thema: Zoomende Kopfleiste

  1. #1
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard Zoomende Kopfleiste

    Hi Leute,
    ich würde gerne einen Header (Logo und Navi) erstellen, der sich beim scrollen verkleinert, so wie auf dieser WP-Seite.
    Wie gehe ich sowas am besten an? Gibt es in Contao eine Erweiterung, die sowas mitbringt, oder muß ich das neu "erfinden"?

    Grüße
    Jochen
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  2. #2
    Contao-Fan Avatar von Ainschy
    Registriert seit
    24.06.2009.
    Ort
    Wenden
    Beiträge
    793
    Partner-ID
    5666
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Dafür braucht es keine Erweiterung das lässt sich mittels JS lösen. In der Regel wird eine CSS dem body Tag hinzugefügt / entfernt. Der Rest ist CSS.

  3. #3
    Contao-Fan Avatar von Stefko
    Registriert seit
    25.10.2012.
    Ort
    Karlsruhe
    Beiträge
    771
    User beschenken
    Wunschliste

    Standard

    Moin,
    das Stichwort hierzu ist "sticky header", da braucht es keine Erweiterung und erfunden ist's auch schon ;-)
    Schau mal (zB) hier: https://www.w3schools.com/howto/howt...cky_header.asp
    Grüße, Stefko

  4. #4
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Hi Ainschy,
    danke für die schnelle Antwort!
    Ohns JS geht das nicht? Ich mag kein JS, da ich es nicht kann ;-) Aber ich glaube mit CSS kann man kein Scrollen abfragen, gell, daran hapert's?

    Grüße
    JK
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  5. #5
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Hi Stefko,
    den sticky header kenne ich! Nur den eleganten Übergang (zoomen) von großer Darstellug des Logos und Navi zur Kleinen, finde ich so cool!
    geht das auch mit CSS?

    Grüße
    JK
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  6. #6
    Contao-Fan Avatar von Stefko
    Registriert seit
    25.10.2012.
    Ort
    Karlsruhe
    Beiträge
    771
    User beschenken
    Wunschliste

    Standard

    Mit dem JS legst Du ja nur fest ab wann eine Aktion eintreten soll, also zB nach 100px Scroll nach unten bekommt der Header die Klasse "sticky". Was diese dann anrichtet, also Größen, Farben, Transparenzen ... ändern ist wieder "schlichtes" CSS. Bzgl. dem smoothigen Übergang zwischen zwei Zuständen ist "CSS Transition" das Stichwort.
    Grüße, Stefko

  7. #7
    Contao-Fan
    Registriert seit
    27.06.2012.
    Beiträge
    600

    Standard

    Zitat Zitat von Ainschy Beitrag anzeigen
    Dafür braucht es keine Erweiterung das lässt sich mittels JS lösen. In der Regel wird eine CSS dem body Tag hinzugefügt / entfernt. Der Rest ist CSS.
    Daran wird sich nichts ändern [emoji6]

    Gesendet von meinem SM-G988B mit Tapatalk

  8. #8
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Hi Leute,
    ich muß diesen Thread nochmal aus der Versenkung holen, auf der o.g. Seite ist der Header (Logo und Navi) ja schon von Anfang an fix, nur die Größenänderung passiert erst wenn "etwas" gescrollt wurde.
    Wie muß ich dann das JS ändern?

    Code:
    // When the user scrolls the page, execute myFunction
    window.onscroll = function() {myFunction()};
    
    // Get the header
    var header = document.getElementById("header");
    
    // Get the offset position of the navbar
    var sticky = header.offsetTop;
    
    // Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
    function myFunction() {
      if (window.pageYOffset > sticky) {
        header.classList.add("sticky");
      } else {
        header.classList.remove("sticky");
      }
    }
    Oder muß ich das CSS ändern?

    Grüße
    JK
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  9. #9
    Contao-Fan Avatar von Ainschy
    Registriert seit
    24.06.2009.
    Ort
    Wenden
    Beiträge
    793
    Partner-ID
    5666
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Das JS gibt erweitert den #header beim scrollen um die CSS Klasse 'sticky' alles weitere ist dann CSS

  10. #10
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Ok, soweit so gut,
    wie kann ich das JS ändern, dass auch die Navigation "id="navibereich" das "sticky" bekommt?

    So etwa:

    Code:
     if (window.pageYOffset > sticky) {
        header.classList.add("sticky");
        navibereich.classList.add("sticky");
      } else {
        header.classList.remove("sticky");
       navibereich.classList.remove("sticky");
      }

    Dann habe ich aber immernoch das Problem, dass der Header und die Navi von Anfang an fixiert sein sollen, sie aber erst ab ca. 50px scrollen die Größe verändern sollen, wie mache ich das?

    Grüße
    JK
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  11. #11
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Hi Leute,
    ich habe inzwischen das JS geändert, so dass es eigentlich das "sticky" auch dem #navibereich anhängen sollte:

    Code:
    // When the user scrolls the page, execute myFunction
    window.onscroll = function() {myFunction()};
    
    // Get the header
    var header = document.getElementById("header");
    var navibereich = document.getElementById("navibereich");
    
    // Get the offset position of the navbar
    var sticky = header.offsetTop;
    
    // Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
    function myFunction() {
      if (window.pageYOffset > sticky) {
        header.classList.add("sticky");
        navibereich.classList.add("sticky");
      } else {
        header.classList.remove("sticky");
        navibereich.classList.remove("sticky");
      }
    }
    Tut es leider nicht!
    Weiß jemand wo ich einen Fehler gemacht habe?



    Grüße
    JK
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  12. #12
    Contao-Fan Avatar von Ainschy
    Registriert seit
    24.06.2009.
    Ort
    Wenden
    Beiträge
    793
    Partner-ID
    5666
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Falls du jQuery einsetzt, kann du dieses Snippet verwenden:

    Code:
    <script>
        jQuery(document).ready(function() {
            jQuery(window).on("scroll", function() {
                jQuery("body").toggleClass("scrolling", jQuery(document).scrollTop() > jQuery("#header").outerHeight())
            })
        });
    </script>
    das setzt die Klasse 'scrolling' in den Body-Tag

  13. #13
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Hallo Ainschy,
    danke für's helfen, leider checke ich nicht, was ich damit anfangen soll! Ich bin bei JS nicht richtig fit. Warum soll der Body eine neue Klasse bekommen?

    Meine Seite funktioniert soweit erst mal, leider bekommt mit dem o.g. Script nur der Header und nicht auch die darunter angeordnete Navigation (#navibereich) die Klasse "sticky", mir würde es weiterhelfen, wenn ich auf diesem Wege weiterkommen würde, anstatt einen ganz neuen Weg einzuschlagen.

    Die Seite erreicht man unter:

    http://buchenroth.pc-service-kubik.de/aktuelles.html


    Grüße aus Ludwigsburg
    Jochen
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  14. #14
    Contao-Fan Avatar von Ainschy
    Registriert seit
    24.06.2009.
    Ort
    Wenden
    Beiträge
    793
    Partner-ID
    5666
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Darum wird die Klasse im Body gesetzt. In der Kaskade kannst du dann alle Elemente darauf reagieren lassen.

    body.scolling #header {} und auch body.scrolling #navibereich {}

    BTW die sticky Klasse wird in deinem Script nicht wieder entfernt.

  15. #15
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Ok, das habe ich kapiert!
    Ich habe das JS geändert, das CSS angepaßt und über die Systemwartung die Daten bereinigt.
    Irgendwie bekommt aber mein Header immernoch die Klasse "sticky" anstatt der Body die Klasse scrolling, welchen Cache muß ich noch leeren?

    Grüße
    JK
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  16. #16
    Contao-Fan Avatar von Ainschy
    Registriert seit
    24.06.2009.
    Ort
    Wenden
    Beiträge
    793
    Partner-ID
    5666
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Die body-scrooling.js wird nicht geladen

  17. #17
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Hallo Ainschy,

    ich habe Dein sniplet in eine eigene Datei "body-scrolling.js" kopiert, und die alte JS-Datei gelöscht. Das CSS habe ich nach Deinen Angaben angepaßt.
    Komischerweise erhält der #Header immernoch die Klasse "sticky"! Ich denke das liegt irdenwie an einem Cache, den ich nicht finde!

    Grüße
    Jochen
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  18. #18
    Contao-Fan Avatar von Ainschy
    Registriert seit
    24.06.2009.
    Ort
    Wenden
    Beiträge
    793
    Partner-ID
    5666
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Schau dir mal in der Dev Konsole des Browsers deine Seite mal an, die JS wird immer noch nicht eingebunden (404)

  19. #19
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    So, jetzt habe ich alles nochmal neu gemacht und alte Zöpfe entfernt. Das hat schon mal geholfen, die JS wird jetzt geladen und das alte Zeug ist weg!

    Leider wirft die Konsole jetzt einen Fehler aus:

    Code:
    Uncaught SyntaxError: expected expression, got '<'
    Da ich, wie gesagt mit JS mich nich auskenne, stehe ich hier auf dem Schlauch!

    Grüße
    Jochen
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  20. #20
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Hi Leute,
    wenn sich jemand mit JS auskennt, wäre ich froh, wenn mir hier geholfen werden könnte!

    Danke
    Jochen
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  21. #21
    Wandelndes Contao-Lexikon Avatar von BugBuster
    Registriert seit
    15.06.2009.
    Ort
    Berlin
    Beiträge
    10.494
    User beschenken
    Wunschliste

    Standard

    Du bindest dein JS Script so ein:
    Code:
    <script src="files/JS/body-scrolling.js?v=337539f1"></script>
    und in dem Script steht dann nochmal
    Code:
    <script> ... </script>
    nimm die Script Tags mal in der Datei body-scrolling.js raus.

    Und nein, ich kenne mich da auch gar nicht aus. Ist mir nur aufgefallen.
    Geändert von BugBuster (21.08.2020 um 16:02 Uhr)
    Grüße, BugBuster
    "view source" is your guide.
    Danke an alle Amazon Wunschlisten Erfüller

  22. #22
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    828

    Standard

    nimm die mal in der Datei body-scrolling.js raus.
    Nee, genau die will er ja einbinden. Also ich sehe das auch so, dass wenn Du <script></script> aus der Datei entfernst es eigentlich gehen sollte.

  23. #23
    Wandelndes Contao-Lexikon Avatar von BugBuster
    Registriert seit
    15.06.2009.
    Ort
    Berlin
    Beiträge
    10.494
    User beschenken
    Wunschliste

    Standard

    er soll ja auch nicht die Datei raus nehmen sondern nur die doppelten Script Tags.
    Grüße, BugBuster
    "view source" is your guide.
    Danke an alle Amazon Wunschlisten Erfüller

  24. #24
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    828

    Standard

    Pardon, kommt davon wenn man nicht genau liest

  25. #25
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Hi Leute,
    vielen Dank für die vielen Tipss, das doppelte <script> war's!
    Jetzt funktioniert es soweit. Ein kleines Schönheitsproblem bleibt: Die ganze Sache startet erst wenn der Header rausgescrollt ist, das ist meines Erachtens bissle zu spät.
    Weiß da jemand Bescheid, wo ich drehen muß, dass das früher geschieht?

    Grüße
    JK
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  26. #26
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Hi Leute:

    Ich habe eine Idee für meinen Header-Problem: Ich würde diesen gerne von Angang an auf "fixed" setzen, leider verschwindet der Header sobald ich "position:fixed" angebe, was mache ich falsch?

    Grüße
    JK
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  27. #27
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    828

    Standard

    Denke da fehlt der z-index, allerdings ist deine eigentliche Navigation ja gar nicht im header und würde dann überdeckt.
    Das solltest Du anders bauen, denke ich.
    Dein Custom Bereich sollte doch, wenn dann unterhalb des Logos im header sein oder nicht??

  28. #28
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Hallo Bennie,
    Du hast natürlich Rech, dass meine Navi im Custom-Bereich ist. Das will ich im Prinzip auch so lassen. Ich denke, wenn ich den Header fixiert bekomme, erreiche ich das mit dem Custom -Bereich auch! Den Tipp mit dem z-Index teste ich so schnell wie möglich, daran habe ich nicht gedacht, DANKE!

    Grüße
    JK
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •