michaah: footer position:fixed, trotzdem hochschiebbar?

Mit

footer { position: fixed; padding: 10px; bottom: 0; left: 0; right: 0; }

wird ein footer am unteren Rand fixiert.

Gibt es eine Möglichkeit dies so zu ändern oder zu erweitern, dass, nachdem der gesamte (oberhalb liegende) Seiteninhalt durchgescrollt/ nach oben geschoben ist (ich gehe hier von der Version für schmale, mobile Viewports aus) nun der Footer mit zusätzlichem Inhalt nach oben gescrollt werden kann. Vielleicht zur besseren Vorstellung, auch wenn das technisch anders funktionieren würde falls es denn ginge: das würde dann so wirken als ob beim Erreichen des unteren Randes des Seiteninhalts der Footer davon hochgezogen würde.

Ist das ohne JS möglich?

  1. Hallo,

    footer { position: fixed; padding: 10px; bottom: 0; left: 0; right: 0; }

    Gibt es eine Möglichkeit dies so zu ändern oder zu erweitern, dass, nachdem der gesamte (oberhalb liegende) Seiteninhalt durchgescrollt/ nach oben geschoben ist (ich gehe hier von der Version für schmale, mobile Viewports aus) nun der Footer mit zusätzlichem Inhalt nach oben gescrollt werden kann.

    ich hab's auf die Schnelle nicht komplett durchdekliniert - aber vielleicht ist position:sticky etwas für dich.

    Vielleicht zur besseren Vorstellung, auch wenn das technisch anders funktionieren würde falls es denn ginge: das würde dann so wirken als ob beim Erreichen des unteren Randes des Seiteninhalts der Footer davon hochgezogen würde.

    Hmm. Den Effekt habe ich noch nicht gesehen, und ich weiß nicht, ob das mit sticky machbar ist. Doch, wenn man das Element mit sticky am unteren Rand anklebt anstatt am oberen, müsste das auch gehen.
    Ich dachte eher an ein Element, das zunächst mitscrollt, aber dann beim Weiterscrollen am oberen Bildschirmrand stehenbleibt. Das wäre dasselbe quasi mit umgekehrtem Vorzeichen.

    Live long and pros healthy,
     Martin

    --
    Home is where my beer is.
    1. @@Der Martin

      ich weiß nicht, ob das mit sticky machbar ist.

      Isses. Beispiel. In dem Beispiel ist es ein aside-Element. Passt bei mir sematisch besser.

      Was bei @michaah angebracht ist, lässt sich ohne Kenntnis des Inhalts natürlich nicht sagen.

      Möglicherweise ist es ja auch nicht ein Footer, sondern zwei? Wie in jenem Beispiel.

      😷 LLAP

      --
      „Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“ —@Ann_Waeltin
      1. ich weiß nicht, ob das mit sticky machbar ist.

        Isses. Beispiel. In dem Beispiel ist es ein aside-Element. Passt bei mir sematisch besser.

        Suuu--per!

        Ohne das bereits was den Code betrifft durchblickt zu haben, darf/kann/soll der Footer (ja, semantisch passt dann auch bei mir besser ein aside-Element) (nicht) innerhalb eines Grid-containers liegen?

        Was bei @michaah angebracht ist, lässt sich ohne Kenntnis des Inhalts natürlich nicht sagen.

        Ganz allgemein: In der Desktopvariante gibt es schmückenden Inhalt der dort neben anderen Dingen seinen Platz hat. Im Layout für schmale Viewports (Smartphones) findet dies Aufgrund seines Formats im scrollenden Inhalt nirgends seinen richtigen Platz. Ja, ich könnte dies ganz weglassen ... oder an das Ende des Inhalts setzten. Im letzten Fall wäre der optische Unterschied nicht sehr groß, aber doch so, dass mir die hier angesprochene Lösung gefiele, das Setzten ans Ende dagegen eher hilflos wirkte.

        Möglicherweise ist es ja auch nicht ein Footer, sondern zwei? Wie in jenem Beispiel.

        Vermutlich tut's ein footer/aside-Element, aber falls sich herausstellt dass zwei footer/aside-Elemente das besser lösen ... hier wurde mir bereits geholfen.

        Danke.

        Gruß

        M.