Frage Sticky-Nav

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

FritzKrieger

Neues Mitglied
9 Dezember 2013
11
0
1
43
Hallo zusammen,

ich sitze seit Stunden an einem Problem, dass ich nicht gelöst bekomme. Leider funktionieren auch die Lösungsbeispiele, die man so im Netz mit 'overflow' findet, nicht.
Wie bekomme ich denn das 'Nav' dazu, dass es am oberen Bildschirmrand hängen bleibt? (Siehe Beispiel)


Das HTML darf gerne umstrukturiert werden, solange sich am Design nichts ändert.

Danke & viele Grüße,
Fritz
 

AndreasB

Mitglied
24 März 2019
34
2
8
Dein Problem ist das du versuchst eine Navigation sticky zu machen, die die Höhe seines Eltern Elements (header) bestimmt.
Ein Element kann nur sticky werden wenn sein Eltern Element größer ist. und kann sich auch nur in diesem Bewegen.

Vorschlag:
Du könntest also zum Beispiel den kompletten Header sticky machen.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.515
479
83
68
Dieses Problem wird hier diskutiert:
D. h. die Position eines Elementes, das sticky ist, bezieht sich auf das Elternelement, das ist in deinem Fall header und darin wird nicht gescrollt.
Da Du schreibst, dass die Nav am oberen Rand kleben bleiben soll, verstehe ich das so, dass der Schriftzug "Bäckerei Müller" beim Scrollen nach oben verschwinden soll. Dafür habe ich leider keine befriedigende Lösung gefunden, sondern nur etwas Furchtbares mit absoluten Maßen und absoluter Positionierung:
Die Nav als direktes Kind des Body angelegt, damit das Sticky funktioniert. Ihr ein oberes Margin gegeben, damit Platz für den Schriftzug bleibt. Sowohl das Bild als auch den Schriftzug absolut positioniert. Das Bild ragt nach oben heraus und füllt dadurch auch den Raum des Margin aus. Und den Schriftzug so positioniert, dass er im Bereich des Margin liegt.

Eigentlich würde ich es in solch einem Fall besser finden, das HTML so zu lassen wie bei dir und die Nav mit Javascript sticky zu machen. Ist aber schon spät, heute mache ich das nicht mehr :smile:
 
  • Like
Reaktionen: FritzKrieger
Werbung: