wake-up-neo.net

position: klebrig funktioniert nicht

Ich habe diesen HTML-Code:

<div class="header">
<div class="desc">Description</div>
<div class="logo"><img src=""/></div>
<div class="navbar"></div></div>

.header hat eine Höhe von 150px. .navbar hat eine Höhe von 20px. Wenn der Benutzer einen Bildlauf ausführt, möchte ich, dass .navbar oben bleibt. Also ging ich zum CSS und setze Position: sticky und top: 0. Das hat aber nicht geklappt. Ich dachte zuerst, dass Firefox Position nicht unterstützt: klebrig, aber das ist nicht der Fall, weil ich eine funktionierende Demo davon sehen konnte. Ich googelte, fand aber nichts hilfreiches. Weiß jemand, warum das nicht funktioniert?

8
Wolfuryo

Es funktioniert gut, wenn Sie die Navbar außerhalb des Headers bewegen. Siehe unten. Aus dem Grund nach MDN :

Das Element wird entsprechend dem normalen Fluss des Dokuments positioniert und dann offset relativ zu seinem Flussstamm und enthaltendem Block basierend auf den Werten von oben, rechts, unten und links.

Für den enthaltenden Block:

Der enthaltende Block ist der Vorfahr, zu dem das Element relativ positioniert ist

Wenn ich das nicht missverstehe, wird die Navbar innerhalb des Headers an der Position 0 positioniert, sobald sie außerhalb des Ansichtsfensters gescrollt wird (was eindeutig bedeutet, dass Sie sie nicht mehr sehen können).

.navbar {
  background: hotpink;
  width: 100%;
  height: 50px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.header {
  height: 150px;
  background: grey;
}

body {
  height: 800px;
  position: relative;
}
<div class="header">
<div class="desc">Description</div>
<div class="logo"><img src=""/></div>
</div>

<div class="navbar"></div>

10
SVSchmidt

Für alle anderen, die auf dieses Problem stoßen, funktionierte die Position sticky für mich nicht, da das body-Element overflow-x: hidden; gesetzt hat.

12
nickspiel

Irgendwie funktioniert Ihr Code nur, wenn sich das .navbar-Element nicht in einem anderen Container wie dem Header befindet. Ich zog es aus und dann funktioniert es gut. Ich habe ein Codepen-Snippet für das erstellt, check es aus

<header>
    <div class="logo">Logo</div>
    <div class="description"><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, veritatis.</div></div>
</header>
<div class="navbar">
    <ul>
        <li><a href="#">navitem1</a></li>
        <li><a href="#">navitem2</a></li>
        <li><a href="#">navitem3</a></li>
        <li><a href="#">navitem4</a></li>
    </ul>
</div>

Im Moment wird position:sticky ziemlich gut unterstützt, wie Sie auf canIuse sehen können. Natürlich hat IE derzeit keine Unterstützung, aber die neue Edge-Version wird dies voll unterstützen! Ich habe einige interessante Artikel zu diesem Thema gefunden:

Aber es gibt gute Nachrichten am Horizont. Ich denke, dass eine bessere Browserunterstützung beim nächsten Mal folgen wird.

1
Gerrit Halfmann

Ihr HTML-Code, wie er ist

<div class="header">
<div class="desc">Description</div>
<div class="logo"><img src=""/></div>
<div class="navbar"></div></div>

und schreiben CSS-Klasse für die Navigationsleiste

.header {
height: 150px;
background-color: #d1d1d1;
}

.navbar {
  background: #999;
  border-bottom: 1px solid #333;
  border-top: 1px solid #333;
  color: #FFF;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

Hoffe das wird helfen

0
M Thomas