Machbar? Sticky Header wird beim Scrollen schmaler?

  • Gelöst Karl

    (@zittau)


    vor 1 Jahr, 7 Monaten

    Hallo,

    gestaltet man mit einem Block-Theme einen breiten Header in setzt diesen als auf die Position „oben gehalten“ zu einem „Sticky Header“ überdeckt dieser auf einem kleinem Bildschirm (Smartphone) zu viel.

    Gibt es bitte eine Möglichkeit (CSS oder Plugin), das sich der breite Header beim Scrollen zu einer schmalen Variante verwandelt, also nur schmaler als „Sticky Header“ dann oben stehen bleibt?

    Karl

    • Dieses Thema wurde geändert vor 1 Jahr, 7 Monaten von Karl.
Ansicht von 4 Antworten – 1 bis 4 (von insgesamt 4)
  • Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 1 Jahr, 7 Monaten

    Machbar ist das – entsprechende Kenntnisse in CSS und JavaScript vorausgesetzt.

    In diesem einfachen Beispiel wird die Größe einer Überschrift im Header durch Scrollen geändert. Das lässt sich dann sinngemäß auch auf die Größe des Headers anwenden.

    How TO – Resize Header on Scroll

    Das JavaScript müsste entsprechend angepasst werden:

    <script>
// When the user scrolls down 50px from the top of the document, resize the header's font size
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("header").style.padding = "10px 10px";
  } else {
    document.getElementById("header").style.padding = "50px 10px";
  }
}
</script>

    Ich möchte daran erinnern, dass wir hier nicht auf Zuruf Code zur Verfügung stellen und auch keine Grundlagen in PHP, HTML, CSS, JavaScript usw. vermitteln können, weil es den Rahmen sprengen würde.

    Thread-Starter Karl

    (@zittau)

    vor 1 Jahr, 7 Monaten

    @pixolin

    Danke!

    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 1 Jahr, 7 Monaten

    Frage beantwortet? Dann bitte noch als „gelöst“ markieren.

    Thread-Starter Karl

    (@zittau)

    vor 1 Jahr, 7 Monaten

    @pixolin

    Danke!

    • Diese Antwort wurde geändert vor 1 Jahr, 7 Monaten von Karl.
Ansicht von 4 Antworten – 1 bis 4 (von insgesamt 4)
  • Das Thema „Machbar? Sticky Header wird beim Scrollen schmaler?“ ist für neue Antworten geschlossen.