"Posizione: appiccicosa;" non funziona CSS e HTML

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>
Programmazione
html css
30º aprile 2017 в 1:43
Non ci sono ancora visualizzazioni

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.

LGSon
Risposta modificata 5º novembre 2018 в 6:41
Commentari (9)
Soluzione

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;
}

  <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>
Marvin
Risposta modificata 26º settembre 2017 в 5:26
Commentari (4)

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;
}

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

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

G-Cyr
Risposta modificata 25º luglio 2019 в 5:54
Commentari (0)