La documentazione è stata piuttosto difficile da capire poiché sono nuovo di CSS. Quindi qualcuno può spiegare la differenza effettiva tra posizione: appiccicosa e posizione: fissa? Gradirei anche un esempio.Differenza tra posizione: appiccicosa e posizione: fissa?
Ho letto attraverso https://developer.mozilla.org/en-US/docs/Web/CSS/position e alcuni altri articoli, ma ancora non capisco.
position: fixed corregge sempre un elemento in una posizione all'interno del contenitore a scorrimento o nel viewport. Non importa come si scorre il suo contenitore, rimarrà nella stessa identica posizione e non influenzerà il flusso di altri elementi all'interno del contenitore.
Senza entrare nei dettagli specifici, position: sticky agisce praticamente come position: relative finché un elemento viene fatto scorrere al di là di un offset specifico, nel qual caso si trasforma in position: fixed, causando l'elemento a "bastone" nella posizione anziché da scorrere fuori dalla vista . Alla fine si sblocca quando viene fatto scorrere verso la sua posizione originale. Almeno, è così che lo capisco in teoria.
Il motivo per cui voglio evitare di entrare nei dettagli è perché position: sticky è nuovo di zecca, sperimentale (come mostrato nel documento a cui si collega), e non ancora finalizzato. Anche quello che ho affermato sopra potrebbe cambiare nel prossimo futuro. Non sarai in grado di utilizzare lo position: sticky in ogni caso (si spera che questo cambierà entro il prossimo anno).
Mozilla ha recentemente presentato la sua implementazione di position: stickyhere. Vale molto la pena di guardare.
Sto usando la posizione: appiccicoso, e all'inizio funziona bene ... passa dall'aspetto relativo a fisso. Ma su una pagina più lunga, alla fine quando scorrono verso il basso abbastanza a lungo, l'intestazione appiccicosa scompare come gli altri oggetti della pagina. – MarsAndBack
Aspetto appiccicoso molto bello e maneggevole. Spero che sarà presto implementato per tutti i browser. Ho visto questo effetto in alcuni siti Web ma è stato creato con javascript. con appiccicoso può ridurre la quantità di codice e complessità. – Babulaas
Posizione Fissa:
Un elemento con posizione fissa viene visualizzata per quanto riguarda la finestra o la finestra del browser stesso. Rimane sempre nello stesso posto anche se la pagina scorre.
Non influenza il flusso di altri elementi nella pagina, ad esempio non occupa uno spazio specifico (proprio come position: absolute).
Se è definito all'interno di un altro contenitore (div con o senza posizione relativa/assoluta), rimane posizionato rispetto al browser e non a quel contenitore. (Qui si differenzia con position: absolute).
Posizione In rilievo:
Un elemento con la posizione appiccicoso è posizionato basa sulla posizione di scorrimento dell'utente. Come ha detto @Boltclock, fondamentalmente si comporta come la posizione: relativa fino a quando un elemento viene fatto scorrere oltre un offset specifico, nel qual caso si trasforma in posizione: fissa. Quando viene fatto scorrere indietro, torna alla posizione precedente (relativa).
Effettua il flusso di altri elementi nella pagina, ovvero occupa uno spazio specifico nella pagina (proprio come position: relative).
Se è definito all'interno di un contenitore, è posizionato rispetto a quel contenitore. Se il contenitore presenta un overflow (scorrimento), a seconda dell'offset della spirale si trasforma in posizione: fissa.
Quindi, se si desidera ottenere la funzionalità fissa ma all'interno di un contenitore, utilizzare sticky.
Vedere questo esempio auto esplicativo per una migliore chiarezza. https://codepen.io/nyctophiliac/pen/xpmpyp
Non esiste una cosa come "posizione: appiccicosa". http://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/ –
@Paulie_D sticky (Experimental) –