Voglio fare in modo che la barra di navigazione rimanga in alto una volta che la scorro, ma non funziona e non ho idea del perché. Se potete aiutarmi, ecco il mio codice HTML e 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>
Controlla se un elemento antenato ha l'overflow impostato (per esempio overflow:hidden
); prova ad attivarlo. Potresti dover risalire l'albero DOM più in alto di quanto ti aspetti =).
Questo potrebbe influenzare la tua posizione:sticky
su un elemento discendente.
Il posizionamento appiccicoso è un ibrido tra il posizionamento relativo e quello fisso. L'elemento è trattato come posizionato relativamente fino a quando non attraversa una soglia specificata, a quel punto è trattato come posizionato fisso.
...
Devi specificare una soglia con almeno una di top
, right
, bottom
, o left
perché il posizionamento adesivo si comporti come previsto. Altrimenti, sarà indistinguibile dal posizionamento relativo.
[fonte: MDN]
Quindi, nel tuo esempio, devi definire la posizione in cui dovrebbe attaccarsi alla fine usando la proprietà 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>
dal mio commento:
position:sticky
necessita di una coordinata per sapere dove attaccare
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>
C'è un polyfill da usare per altri browser oltre a FF e Chrome . Questa è una regola sperimentale che può essere implementata o meno in qualsiasi momento attraverso i browser. Chrome l'ha aggiunto un paio di anni fa e poi l'ha abbandonato, sembra tornato... ma per quanto tempo?
Il più vicino sarebbe position:relative + coordonate aggiornate durante lo scorrimento una volta raggiunto il punto di appiccicosità, se si vuole trasformare questo in uno script javascript