"Position: klebrig;" funktioniert nicht CSS und HTML

Ich möchte die Navigationsleiste an der Spitze bleiben, sobald ich zu ihr blättern, aber es funktioniert nicht und ich habe keine Ahnung warum. Wenn Sie bitte helfen können, hier ist mein HTML und CSS-Code:"Position: klebrig;" funktioniert nicht CSS und HTML

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

Quelle

2017-04-30 Harleyoc1

Position: sticky braucht eine coordonate zu tel wo –

Sie müssen auch mit den Eltern Elemente vorsichtig sein, zu bleiben. ['position: sticky' kann aufhören zu funktionieren, wenn es in einer Flexbox ist, außer du bist vorsichtig] (https://stackoverflow.com/questions/44446671/my-position-sticky-element-isnt-sticky-when-using-flexbox) und wird auch fehlschlagen, wenn ein 'Überlauf gibt es: hidden' oder' Überlauf: auto' zwischen ihm und was auch immer es im Innern (Körper Wurzel scrollt oder nächste Vorfahren mit Überlauf: scroll) – user568458

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

So in Ihrem Beispiel, müssen Sie die Position definieren, wo es unter Verwendung der top Eigenschaft am Ende bleiben soll.

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>

Quelle

2017-04-30 13:57:35 Marvin

Danke dies gearbeitet – Harleyoc1

von meinem Kommentar:

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 polyfill für andere Browser als FF und Chrome zu verwenden ist. Dies sind experimentelle Regeln, die zu jeder Zeit durch Browser implementiert werden können. Chrome fügen es vor ein paar Jahren hinzu und dann fiel es, es scheint zurück ... aber für wie lange?

Die nächstgelegene würde Position sein: relativ + coordonates aktualisiert, während einmal Scrollen den klebrigen Punkt erreicht, wenn man diese in einen Javascript-Skript

Quelle

2017-04-30 13:59:50

Danke so sehr es funktioniert! – Harleyoc1

prüfen drehen will, wenn übergeordnete Elemente Überlauf: hidden; versuchen Sie es umzuschalten.

Dies kann Ihre Position beeinflussen: klebrig auf einem Kindelement.

Quelle

2017-12-19 00:36:39 MarsAndBack

Ich wünschte, ich könnte Sie mehrfach aufrüsten! Das hat mich öfter gebissen, als ich zugeben möchte. –

Ich habe gleiches Problem, und ich fand die Antwort here.

Wenn Ihr Element klebt nicht als das erste, was zu erwarten überprüfen sind die auf den Behälter aufgebracht Regeln.

auf dem übergeordneten Set Insbesondere sucht jede Überlaufeigenschaft. Sie können nicht verwenden: overflow: hidden, overflow: scroll oder overflow: auto auf dem Elternteil eines position: sticky Element.

Quelle

2018-03-03 04:58:02

"Position: klebrig;" funktioniert nicht CSS und HTML

Antwort

Verwandte Themen