"Pozycja: lepki;" nie działa CSS i HTML

Question

Chcę sprawić, aby pasek nawigacyjny był na górze po przewinięciu do niego, ale nie działa i nie mam pojęcia dlaczego. Jeśli można proszę o pomoc, tutaj jest mój kod HTML i CSS:

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

Answer 1

Sticky pozycjonowanie jest hybrydą względnej stałej i pozycjonowania. Element traktowany jest jako względnie ustawiony, dopóki nie przekroczy określonego progu, w którym to momencie traktowany jest jako ustawiony na stałe.
...
Należy określić próg z co najmniej jednego z top, right, bottom lub left do lepkiej pozycjonowania zachowywać się jak oczekiwano. W przeciwnym razie będzie nie do odróżnienia od względnego pozycjonowania. [source: MDN]

Tak w przykładzie, należy określić miejsce, w którym powinien trzymać w końcu za pomocą właściwości top.

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>

Answer 2

z moim komentarzem:

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>

Jest polyfill używać do innych przeglądarek niż FF i Chrome. Jest to eksperymentalna reguła, którą można zaimplementować w dowolnym momencie za pośrednictwem przeglądarek. Chrome dodaje ją kilka lat temu, a potem ją upuszcza, wydaje się z powrotem ... ale na jak długo?

Najbliżej byłoby position: relative coordonates + aktualizowane podczas przewijania po osiągnięciu lepką punkt, jeśli chcesz przekształcić javascript skrypt

Answer 3

Sprawdzić, czy elementy macierzyste mają overflow: hidden; spróbuj to zmienić.

Może to wpłynąć na Twoją pozycję: przykleja się do elementu podrzędnego.

Answer 4

Mam ten sam problem i znalazłem odpowiedź here.

Jeśli twój element nie przykleja się zgodnie z oczekiwaniami, pierwszą rzeczą do sprawdzenia są reguły zastosowane do pojemnika.

W szczególności poszukaj dowolnej właściwości przepełnienia ustawionej w obiekcie nadrzędnym. Nie można użyć: overflow: hidden, overflow: scroll ani overflow: auto na obiekcie nadrzędnym elementu position: sticky.