"Position: klebrig;" funktioniert nicht CSS und HTML

177

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>

Harleyoc1
quelle
10
Position: klebrig braucht eine Koordinate, um zu tel, wo zu kleben
G-Cyrillus
35
Sie müssen auch mit den übergeordneten Elementen vorsichtig sein. position: stickykann aufhören zu arbeiten, wenn es sich in einer Flexbox befindet, es sei denn, Sie sind vorsichtig und wird auch fehlschlagen, wenn es ein overflow: hiddenoder overflow: autozwischen ihr und dem gibt, was darin
gescrollt wird
2
@ user56reinstatemonica8 OMG danke so sehr, dass du mir von dem overflow: hiddenund erzählt hast overflow: auto! Ich habe mich seit Tagen am Kopf gekratzt und versucht, diesen Mist zum
Laufen

Antworten:

205

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>

Marvin
quelle
124
Im Allgemeinen reicht diese Antwort nicht aus, um bei der Arbeit zu bleiben. Eltern sollten auch keine Überlaufeigenschaft haben.
ViliusL
Danke für deinen Kommentar. Ich stimme Ihnen zu, dass meine Antwort für andere Beispiele als die des OP möglicherweise nicht ausreicht. Die anderen Antworten weisen darauf hin :)
Marvin
Ich denke, der Trick ist, dass die Position Sticky nur auf die Kinder angewendet werden kann, die einem scrollbaren Elternteil mit einer bekannten Größe gehören (ein direktes Kind in einer Flexbox hat eine bekannte Höhe, die aus einem anderen Flex-Element berechnet wird)
code4j
@ViliusL danke für deinen Kommentar! Das war das Problem, das ich mit meiner Position hatte: klebrig, das hätte ich ohne dich nicht gewusst, da ich diese Informationen nirgendwo gefunden habe.
Piotr Szlagura
Sticky Position sollte kein Elternteil mit Überlauf-Eigenschaft haben, auch Sticky wird in einigen Webbrowsern nicht unterstützt
Rohan Shenoy
330

Ü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 .

MarsAndBack
quelle
36
Ich wünschte, ich könnte dich mehrmals positiv bewerten! Das hat mich öfter gebissen, als ich zugeben möchte.
Alexander Varwijk
2
Das ist die richtige Antwort. Es kann jedoch schwierig sein, herauszufinden, welches übergeordnete Element das Problem verursacht. Ich habe ein Abfrageskript geschrieben, um die Überlaufeigenschaft der Eltern zu identifizieren, die das Problem identifiziert haben (führen Sie es einfach in Ihrer Konsole aus). Da das Skript einige Zeilen umfasst, habe ich eine Antwort hinzugefügt, die das folgende Skript enthält.
danday74
5
Ich habe das "s" in Ihren "Elternelementen"
che-azeh
5
Ich habe auch das "s" verpasst :( und das war das Problem. An vielen Stellen schreiben die Leute, dass Sie nur Eltern überprüfen sollten, nicht alle Eltern. Ich fand mein Problem, indem ich überprüfte, ob das Aufrufen der $(stickyElement).parents().css("overflow", "visible")Webkonsole helfen würde, und es tat. Dann fand ich das ferne Elternteil mit overflow:hidden. Stil, der das Problem verursacht ich wünschte , ich diese Antwort mehr lesen sorgfältig.
Mariusz Pawelski
2
Wenn Sie overflow:hiddennach suchen
brandonjp
100

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.

Miftah Mizwar
quelle
Dies ist auch die richtige Antwort, aber siehe auch meine Antwort, mit deren Hilfe der Elternteil, der das Problem verursacht, leicht identifiziert werden kann.
danday74
9
Sie sollten nicht nur am nächsten übergeordneten Container überprüfen , aber alle übergeordneten Element s .
Mariusz Pawelski
Ja, sehen Sie meine Antwort, um genau das zu tun und überprüfen Sie alle Eltern sehr schnell
danday74
1
Der Link hat mir auch geholfen. Mein Problem wurde gelöst durch "... Wenn Sie keinen Überlauf verwenden und immer noch Probleme haben, lohnt es sich zu überprüfen, ob eine Höhe für das übergeordnete
Element festgelegt ist
Lebensretter, wirklich einfache Beschreibung des Problems, aber gibt es eine Lösung für dieses nur merkwürdige
Rahul Singh
32

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.
Simon_Weaver
quelle
@Sergey Ich bin mir nicht ganz sicher, welches von display: blockund position: relativedas richtige Verhalten in Safari auslöst - schien es, dass nur display: blockbenötigt wurde? Natürlich tut es wahrscheinlich nicht weh, beide angegeben zu haben
Simon_Weaver
2
Gerade display: blockwar genug
Sergey
27

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;
}
danday74
quelle
2
Das war sehr hilfreich. Ich konnte das übergeordnete Element mit einem Wert von schnell identifizieren overflow: invisible.
David Brower
4
Wenn Sie jQuery nicht auf Ihrer Seite haben, können Sie dieses kleine Snippet in der Konsole (async function() { let response = await fetch('https://code.jquery.com/jquery-3.3.1.min.js'); let script = await response.text(); eval(script); })();
ausführen
8
Sie können dieses Snippet auch ausführen, für das JQuery nicht erforderlich ist, um einen nicht "sichtbaren" übergeordneten Überlauf zu finden: var p = $0.parentElement; while(p != null) { var ov = getComputedStyle(p).overflow; if(ov !== 'visible') console.warn(ov, p); else console.log(ov, p); p = p.parentElement; }Wo $0ist das letzte in Entwicklertools ausgewählte Element ?
Mariusz Pawelski
12

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

Unicco
quelle
1
Anzeige: Flex macht das Ding
MaciejLisCK
5

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.

ich k
quelle
Haben Sie eine Quelle dafür oder andere Informationen darüber, wie Sie dies umgehen können?
AJMansfield
5

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.

solaris333
quelle
Danke, das habe ich gesucht! Für mich gab es keine Eltern mit Überlauf, noch gab es irgendwelche Höhenprobleme. Es wäre schön, diese Informationen auch in der akzeptierten Antwort zu sehen.
Saglamcem
Ich habe gerade durch Experimentieren herausgefunden, dass der Sticky nicht außerhalb seines übergeordneten Elements scrollt. Es spielt keine Rolle, wie viele andere Geschwister es hat, aber sein Elternteil kann anscheinend kein Navbar-Container sein, sondern muss etwas auf der Ebene eines Seiten- / Inhaltscontainers sein :( Das ist lächerlich
Ben Philipp
Aber Lo! Wenn Sie können, wenn Sie das einschränkende Elternteil auf setzen display: unset, wird diese Einschränkung aufgehoben! siehe stackoverflow.com/a/60560997/2902367 scheint sich auch auf die Arbeit mit contents, initialund (?)inline
Ben Philipp
5

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

display: unset

Hat für mich gearbeitet

brianokinyi
quelle
Das ist der eine.
mm-93
Oh! Dies scheint eine Problemumgehung für den Fall zu sein, dass ein übergeordnetes Element eine begrenzte Höhe hat (z. B. ein Navigationsleistencontainer oder etwas anderes im Gegensatz zu einem Ganzkörper- oder Seitencontainer) - es scheint, dass Stickies nicht gerne außerhalb ihres Elements scrollen Eltern (was absolut lächerlich ist!) Jetzt muss jeder nur so viel Glück haben, dass er die Eltern einstellen display: unsetkann, was möglicherweise nicht immer sofort lebensfähig ist
Ben Philipp
Auch scheint mit zu arbeiten contents, initialund (?)inline
Ben Philipp
4

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

G-Cyrillus
quelle
4

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.

Tristan M.
quelle
2
"Wenn Ihr klebriges Element das einzige untergeordnete Element des Containers ist, hat der Container genau die gleiche Größe und es gibt keinen Platz zum Scrollen." GOLD!!! Danke dir!
Mark Jackson
Ja! Ich habe eine Weile gebraucht, um das herauszufinden. Anfangs fand ich es eine lächerliche Einschränkung, aber ich denke, es sollte zumindest die Option dafür geben. Ich würde viel lieber so etwas wie sticky-limit: parent, sticky-limit: bodyoder sticky-limit: nth-parent(3)... Wie dem auch sei: Wenn Sie können, Sie diese Einschränkung aufheben kann , indem der Begrenzungs Eltern display: unset, wie in angemerkt stackoverflow.com/a/60560997/2902367 . Auch scheint mit zu arbeiten contents, initialund (?)inline
Ben Philipp
3

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.

Marco Peralta
quelle
1

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%

Javad Ebrahimi
quelle
1

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!

yuval.bl
quelle
1

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

Juanma Menendez
quelle
0

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.

Flo
quelle
Unsicher, warum dies von jemandem abgelehnt wurde, aber genau das war mein Fall: Ich fügte float:leftdem übergeordneten Element hinzu (ohne Float war seine Höhe 0) und position:stickyarbeitete.
Aexl
0

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()
    }
}
Carl Brubaker
quelle
0

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).

Rexhin Hoxha
quelle
0

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;"} 
      &nbsp;

(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.

jpw
quelle
-1

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;
}
Anh Nguyen
quelle