"Position: klebrig;" funktioniert nicht CSS und HTML

Ich möchte, dass die Navigationsleiste nach dem Scrollen oben bleibt, aber sie funktioniert nicht und ich habe keine Ahnung warum. Wenn Sie bitte helfen können, ist hier mein HTML- und CSS-Code:

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato",sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover{
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

<nav style="position: sticky; position: -webkit-sticky;">
  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
</nav>

Sticky Positioning ist eine Mischung aus relativer und fester Positionierung. Das Element wird als relativ positioniert behandelt, bis es einen bestimmten Schwellenwert überschreitet. An diesem Punkt wird es als fest positioniert behandelt.
...
Sie einen Schwellenwert mit mindestens einem von angeben müssen top, right, bottom, oder leftfür klebrige Positionierung zu verhalten wie erwartet. Andernfalls ist es nicht von der relativen Positionierung zu unterscheiden. [ Quelle: MDN ]

In Ihrem Beispiel müssen Sie also die Position definieren, an der es am Ende bleiben soll, indem Sie die topEigenschaft verwenden.

html, body {
  height: 200%;
}

nav {
  position: sticky;
  position: -webkit-sticky;
  top: 0; /* required */
}

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato", sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover {
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

<nav>
  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
</nav>

Überprüfen Sie, ob für ein Vorgängerelement ein Überlauf festgelegt wurde (z. B. overflow:hidden). versuche es umzuschalten. Möglicherweise müssen Sie den DOM-Baum höher als erwartet nach oben gehen =).

Dies kann sich position:stickyauf ein untergeordnetes Element auswirken .

Ich habe das gleiche Problem und habe hier die Antwort gefunden .

Wenn Ihr Element nicht wie erwartet haftet, müssen zunächst die auf den Container angewendeten Regeln überprüft werden.

Suchen Sie insbesondere nach Überlaufeigenschaften, die für das übergeordnete Element festgelegt wurden. Sie können nicht verwenden : overflow: hidden, overflow: scrolloder overflow: autoauf dem Elternteil eines position: stickyElements.

Einige weitere Dinge, auf die ich gestoßen bin:

Wenn Ihr klebriges Element eine Komponente ist (eckig usw.)

• Wenn das 'sticky'-Element selbst eine Komponente mit einem benutzerdefinierten Element-Selektor ist, z. B. eine Winkelkomponente mit dem Namen, müssen <app-menu-bar>Sie dem CSS der Komponente Folgendes hinzufügen:

  :host { display: block; }   

  oder

  app-menu-bar  { display: block; }   // (in the containing component's css)

  Insbesondere Safari unter iOS scheint display:blocksogar das Stammelement app-rooteiner eckigen Anwendung zu erfordern , da es sonst nicht haften bleibt.

• Wenn Sie eine Komponente und die Definition der CSS in der Komponente erstellen (Schatten DOM / verkapselt Stile) sicher, dass die position: stickyan die ‚äußere‘ Selektor angelegt wird (z. B. app-menu-barin devtools sollte die klebrige Position zeigen) und nicht eine Top - Level div innerhalb die Komponente. Mit Angular kann dies mit dem :hostSelektor im CSS für Ihre Komponente erreicht werden.

  :host
  {
      position: sticky;
      display: block;   // this is the same as shown above
      top: 0;
      background: red;    
  }

Andere

• Wenn das Element, das Ihrem klebrigen Element folgt, einen festen Hintergrund hat, müssen Sie Folgendes hinzufügen, damit es nicht darunter rutscht:

  .sticky-element { z-index: 100; }
  .parent-of-sticky-element { position: relative; }

• Ihr klebriges Element muss zuerst (vor Ihrem Inhalt) sein, wenn Sie es verwenden, topund danach, wenn Sie es verwenden bottom.

• Es gibt Komplikationen bei der Verwendung overflow: hiddenIhres Wrapper-Elements - im Allgemeinen wird das klebrige Element im Inneren abgetötet. Besser erklärt in dieser Frage

• Mobile Browser können klebrige / fest positionierte Elemente deaktivieren, wenn die Bildschirmtastatur sichtbar ist. Ich bin mir der genauen Regeln nicht sicher (weiß irgendjemand jemals), aber wenn die Tastatur sichtbar ist, sehen Sie eine Art 'Fenster' in das Fenster und Sie werden nicht leicht in der Lage sein, Dinge dazu zu bringen, sich an die zu halten tatsächlich sichtbarer oberer Bildschirmrand.

• Stell sicher dass du hast:

  position: sticky;

  und nicht

  display: sticky;

Verschiedene Bedenken hinsichtlich der Benutzerfreundlichkeit

• Seien Sie vorsichtig, wenn Ihr Design vorsieht, dass auf Mobilgeräten Dinge am unteren Bildschirmrand angebracht werden. Auf dem iPhone X wird beispielsweise eine schmale Linie angezeigt, um den Wischbereich anzuzeigen (um zur Startseite zurückzukehren). Elemente innerhalb dieses Bereichs können nicht angeklickt werden. Wenn Sie also etwas kleben, müssen Sie auf dem iPhone X testen, ob Benutzer es aktivieren können. Ein großer "Jetzt kaufen" -Button ist nicht gut, wenn die Leute nicht darauf klicken können!
• Wenn Sie auf Facebook werben, wird die Webseite in einem Facebook-Steuerelement in den mobilen Apps von Facebook angezeigt. Insbesondere bei der Anzeige von Videos (bei denen Ihr Inhalt nur in der unteren Hälfte des Bildschirms beginnt) werden klebrige Elemente häufig vollständig durcheinander gebracht, indem Ihre Seite in ein scrollbares Ansichtsfenster verschoben wird, in dem Ihre klebrigen Elemente tatsächlich vom oberen Rand der Seite verschwinden. Stellen Sie sicher, dass Sie im Kontext einer tatsächlichen Anzeige testen und nicht nur im Browser des Telefons oder sogar im Browser von Facebook, die sich alle unterschiedlich verhalten können.

Dies ist eine Fortsetzung der Antworten von MarsAndBack und Miftah Mizwar.

Ihre Antworten sind richtig. Es ist jedoch schwierig, die problematischen Vorfahren zu identifizieren.

Um dies sehr einfach zu machen, führen Sie einfach dieses jQuery-Skript in Ihrer Browserkonsole aus und es zeigt Ihnen den Wert der Überlaufeigenschaft für jeden Vorfahren an.

$('.your-sticky-element').parents().filter(function() {
    console.log($(this));
    console.log($(this).css('overflow'));
    return $(this).css('overflow') === 'hidden';
});

Wo ein Vorfahr overflow: visiblesein CSS nicht geändert hat, so dass es tut!

Stellen Sie außerdem, wie an anderer Stelle angegeben, sicher, dass Ihr Sticky-Element dies im CSS enthält:

.your-sticky-element {
    position: sticky;
    top: 0;
}

Ich musste das folgende CSS verwenden, um es zum Laufen zu bringen:

.parent {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    overflow: visible;
}

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

Wenn oben nicht funktioniert, dann ...

Gehen Sie alle Vorfahren durch und stellen Sie sicher, dass keines dieser Elemente vorhanden ist overflow: hidden. Sie müssen dies ändern inoverflow: visible

Ein lustiger Moment, der für mich nicht offensichtlich war: Zumindest in Chrome 70 position: stickywird er nicht angewendet, wenn Sie ihn mit DevTools eingestellt haben.

Es scheint, dass sich die zu klebende Navigationsleiste nicht in einem Div oder Abschnitt mit anderem Inhalt befinden sollte. Keine der Lösungen funktionierte für mich, bis ich die Navigationsleiste aus dem Div herausnahm, das die Navigationsleiste mit einer anderen oberen Leiste teilte. Ich hatte zuvor die obere Leiste und die Navigationsleiste mit einem gemeinsamen Div umwickelt.

Wenn Sie darauf gestoßen sind und Ihr Sticky nicht funktioniert, setzen Sie das übergeordnete Element auf:

display: unset

Hat für mich gearbeitet

aus meinem Kommentar:

position:sticky braucht eine Koordinate, um zu tel, wo man bleiben soll

nav {
  position: sticky;
  top: 0;
}

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato", sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover {
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

body {
  height: 200vh;
}

<nav>
  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
</nav>

Es gibt Polyfill für andere Browser als FF und Chrome. Dies ist eine experimentelle Regel, die jederzeit über Browser implementiert werden kann oder nicht. Chrome hat es vor ein paar Jahren hinzugefügt und dann fallen gelassen, es scheint zurück zu sein ... aber wie lange?

Die nächstgelegene wäre position: relative + Koordinaten, die beim Scrollen aktualisiert wurden, sobald der Sticky Point erreicht ist, wenn Sie dies in ein Javascript-Skript umwandeln möchten

Ich weiß, dass dies bereits beantwortet zu sein scheint, aber ich bin auf einen bestimmten Fall gestoßen, und ich habe das Gefühl, dass die meisten Antworten den Punkt verfehlen.

Die overflow:hiddenAntworten decken 90% der Fälle ab. Das ist mehr oder weniger das "Sticky Nav" -Szenario.

Das klebrige Verhalten wird jedoch am besten in der Höhe eines Behälters verwendet. Stellen Sie sich ein Newsletter-Formular in der rechten Spalte Ihrer Website vor, das mit der Seite nach unten rollt. Wenn Ihr klebriges Element das einzige untergeordnete Element des Containers ist, hat der Container genau die gleiche Größe und es ist kein Platz zum Scrollen vorhanden.

Ihr Container muss die Höhe haben, in der Ihr Element scrollen soll. Was in meinem Szenario "rechte Spalte" die Höhe der linken Spalte ist. Der beste Weg, dies zu erreichen, ist die Verwendung display:table-cellfür die Spalten. Wenn Sie nicht können und dabei bleiben float:rightund so wie ich, müssen Sie entweder die Höhe der linken Spalte erraten, um sie mit Javascript zu berechnen.

Ich weiß, dass dies ein alter Beitrag ist. Aber wenn es jemanden wie mich gibt, der erst kürzlich angefangen hat, mit der Position herumzuspielen: klebrig, das kann nützlich sein.

In meinem Fall habe ich position: sticky als Gitterelement verwendet. Es funktionierte nicht und das Problem war ein Überlauf-x: versteckt auf dem htmlElement. Sobald ich diese Eigenschaft entfernt habe, hat es gut funktioniert. Überlauf-x: auf dem bodyElement versteckt zu haben , schien zu funktionieren, keine Ahnung warum noch.

zwei antworten hier:

1. overflowEigenschaft aus dem bodyTag entfernen

2. Stellen Sie height: 100%das ein body, um das Problem mit zu behebenoverflow-y: auto

min-height: 100% nicht arbeiten statt height: 100%

Ich glaube, dieser Artikel sagt viel darüber aus, wie es stickyfunktioniert

Wie CSS Position Sticky wirklich funktioniert! CSS Position Sticky besteht aus zwei Hauptteilen: Sticky Item und Sticky Container .

Sticky Item  - ist das Element, das wir mit der Position definiert haben: Sticky Styles. Das Element schwebt, wenn die Position des Ansichtsfensters mit der Positionsdefinition übereinstimmt, z top: 0px.

Sticky Container - ist das HTML-Element, das das Sticky-Element umschließt. Dies ist der maximale Bereich, in dem der klebrige Gegenstand schweben kann.

Wenn Sie ein Element mit der Position: sticky definieren, definieren Sie das übergeordnete Element automatisch als sticky container!

Das wirkliche Verhalten eines klebrigen Elements ist:

• Erstens ist es für eine Weile relativ
• dann ist es für eine Weile behoben
• Schließlich verschwindet es aus der Ansicht

Ein klebrig positioniertes Element wird als relativ positioniert behandelt, bis sein enthaltender Block einen bestimmten Schwellenwert (z. B. das Setzen von top auf einen anderen Wert als auto) innerhalb seiner Flusswurzel (oder des Containers, in dem es scrollt) überschreitet. An diesem Punkt wird es als "stecken geblieben" behandelt "bis sie die gegenüberliegende Kante ihres enthaltenden Blocks treffen.

Das Element wird gemäß dem normalen Fluss des Dokuments positioniert und dann relativ zu seinem nächsten scrollenden Vorfahren versetzt und enthält einen Block (nächsten Vorfahren auf Blockebene), einschließlich tabellenbezogener Elemente, basierend auf den Werten von oben, rechts, unten, und links. Der Versatz wirkt sich nicht auf die Position anderer Elemente aus.

Dieser Wert erstellt immer einen neuen Stapelkontext. Beachten Sie, dass ein klebriges Element an seinem nächsten Vorfahren "haftet", der über einen "Bildlaufmechanismus" verfügt (der erstellt wird, wenn der Überlauf ausgeblendet, gescrollt, automatisch oder überlagert ist), auch wenn dieser Vorfahr nicht der nächste tatsächlich scrollende Vorfahr ist.

Dieses Beispiel hilft Ihnen zu verstehen:

code https://codepen.io/darylljann/pen/PpjwPM

Wenn der Fix von danday74 nicht funktioniert, überprüfen Sie, ob das übergeordnete Element eine Höhe hat.

In meinem Fall hatte ich zwei Kinder, eines nach links und eines nach rechts. Ich wollte, dass das richtige schwimmende klebrig wird, musste aber <div style="clear: both;"></div>am Ende des Elternteils ein hinzufügen , um ihm Höhe zu geben.

Ich habe eine JS-Lösung verwendet. Es funktioniert in Firefox und Chrome. Probleme, lass es mich wissen.

html

<body>
  <header id="header">
    <h1>Extra-Long Page Heading That Wraps</h1>
    <nav id="nav">
      <ul>
        <li><a href="" title="">Home</a></li>
        <li><a href="" title="">Page 2</a></li>
        <li><a href="" title="">Page 3</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <p><!-- ridiculously long content --></p>
  </main>
  <footer>
    <p>FOOTER CONTENT</p>
  </footer>
  <script src="navbar.js" type="text/javascript"></script>
</body>

CSS

nav a {
    background: #aaa;
    font-size: 1.2rem;
    text-decoration: none;
    padding: 10px;
}

nav a:hover {
    background: #bbb;
}

nav li {
    background: #aaa;
    padding: 10px 0;

}

nav ul  {
    background: #aaa;
    list-style-type: none;
    margin: 0;
    padding: 0;

}

@media (min-width: 768px) {

    nav ul {
        display: flex;
    }
}

js

function applyNavbarSticky() {
    let header = document.querySelector('body > header:first-child')
    let navbar = document.querySelector('nav')
    header.style.position = 'sticky'

    function setTop() {
        let headerHeight = header.clientHeight
        let navbarHeight = navbar.clientHeight
        let styleTop = navbarHeight - headerHeight

        header.style.top = `${styleTop}px`
    }

    setTop()

    window.onresize = function () {
        setTop()
    }
}

z-indexist auch sehr wichtig. Manchmal funktioniert es, aber Sie werden es einfach nicht sehen. Versuchen Sie, es auf eine sehr hohe Zahl einzustellen, nur um sicherzugehen. Stellen Sie auch nicht immer top: 0etwas Höheres auf, falls es irgendwo versteckt ist (unter einer Symbolleiste).

Hier ist, was mich auslöste ... mein klebriges Div befand sich in einem anderen Div, so dass das übergeordnete Div nach dem klebrigen Div zusätzlichen Inhalt benötigte, um das übergeordnete Div "groß genug" zu machen, damit das klebrige Div über anderen Inhalt "gleiten" kann Sie scrollen nach unten.

In meinem Fall musste ich direkt nach dem klebrigen Div hinzufügen:

    %div{style:"height:600px;"} 
       

(Meine Anwendung verfügt über zwei nebeneinander angeordnete Divs mit einem "großen" Bild links und einem kurzen Dateneingabeformular rechts. Ich wollte, dass das Dateneingabeformular beim Scrollen nach unten neben dem Bild angezeigt wird. Das Formular ist also immer auf dem Bildschirm. Es würde nicht funktionieren, bis ich den obigen "zusätzlichen Inhalt" hinzugefügt habe, damit das klebrige Div etwas zum "Übergleiten" hat.

Es ist WAHR, dass das overflowentfernt oder festgelegt werden muss initial, damit position: stickydas untergeordnete Element funktioniert. Ich habe Material Design in meiner Angular-App verwendet und festgestellt, dass einige Materialkomponenten den overflowWert geändert haben. Das Update für mein Szenario ist

mat-sidenav-container, mat-sidenav-content {
  overflow: initial;
}