Haftender globaler Hinweis

Merkmal
1

Wir haben versucht, Ihre „Global Notice“-Funktion zu verwenden. Leider verschwindet sie beim Scrollen. Daher möchten wir, dass sie „sticky“ ist. Dies ist wiederum nicht über benutzerdefiniertes CSS realisierbar, da position: sticky nur auf ein Element angewendet werden kann und bereits ein „sticky“-Element vorhanden ist: der Header.

Könnten Sie konfigurierbar machen, wo die Benachrichtigung im DOM platziert wird, damit wir sie ebenfalls in den Header-Container einfügen können, um sie „sticky“ zu machen?

1 „Gefällt mir“
2

Warum kein Banner verwenden?:

3 „Gefällt mir“
3

Vielen Dank für die Empfehlung, aber das löst das oben beschriebene Problem nicht: Die globale Benachrichtigung ist nicht fixiert und somit auch nicht das vielseitige Banner. Wie ich weiter beschrieben habe, wäre dies mit CSS allein nicht zu erreichen, da das vielseitige Banner denselben Platz im DOM einnimmt wie die globale Benachrichtigung, die sich außerhalb des fixierten Header-Containers befindet.

2 „Gefällt mir“
4

Guter Punkt.

Eine weitere Option ist das Layouts-Plugin, das Seitenleisten hinzufügt, die angeheftet werden können. Es gibt auch ein benutzerdefiniertes HTML-Widget dafür, mit dem Sie beliebige Inhalte hinzufügen können.

2 „Gefällt mir“
5

Wenn Sie „sticky“ auf den übergeordneten Container anwenden, funktioniert es… obwohl, wenn sich andere Warnungen in diesem Container befinden, werden diese ebenfalls angeheftet (wie die Warnung „Möchten Sie Live-Benachrichtigungen, wenn Leute auf Ihre Beiträge antworten?“).

Wir haben eine CSS-Eigenschaft, die den oberen Rand vom Header richtig versetzt:

#main-container.container {
    position: sticky;
    top: var(--header-offset);
    z-index: 9;
}
6 „Gefällt mir“