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

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.

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

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

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

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.

Zitat:

---

Zitat von Ainschy

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

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

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

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

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

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

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

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.

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

Die body-scrooling.js wird nicht geladen

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

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

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

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

Danke
Jochen

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.

Zitat:

---

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.

er soll ja auch nicht die Datei raus nehmen sondern nur die doppelten Script Tags.

Pardon, kommt davon wenn man nicht genau liest :D :o

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

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

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

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