Sticky Header - Content legt sich beim Scrollen über Header/Navigation

[RainerG]

Hallo!

Ich habe diese Sticky Header Lösung in einer Contao 4.8 Installation übernommen und angepasst:
https://www.w3schools.com/howto/howt...bar_sticky.asp

Übernommen und angepasst habe ich folgendes CSS:

.sticky + #container {
    padding-top: 60px;
}

.sticky {
    position: fixed;
      top: 0;
      width: 100%;
}

Im Skript habe ich das Ermitteln der Navbar angepasst (entsprechend meiner vorhandenen CSS fürdie Navigation):

var navbar = document.getElementById("hor_navigation");

Eigentlich funktioniert das soweit gut. Die Navigation scrollt an den oberen Rand und bleibt 'hängen'.

Dann scrollt allerdings der restliche Teil über die Navigation (und verschwindet nicht unter diese) und ich weiß nicht warum.

Mit dieser Lösung hatte ich den gleichen Effekt:
https://blog.jst-media.de/sticky-header-in-contao/


Über jeden Tipp bin ich sehr dankbar.

[derRenner]

Hallo,

#header {position: relative;}

... z-index braucht schon mal eine 'position'-Angabe ...

[RainerG]

Hallo,

#header {position: relative;}

... z-index braucht schon mal eine 'position'-Angabe ...

Ja, das war's. Da kann ich jetzt das Brett vor'm Kopf abnehmen - großes DANKE!