css - ¿Por qué elemento con posición: pegajoso no se pega al fondo del padre?

css3 css-position

Question

Estoy tratando de entender lo que css "pegajoso" hace. Puedo hacer que se adhiera a la parte superior de su padre, pero no a la parte inferior

Mi código de prueba es:

.block {
  background: pink;
  width: 50%;
  height: 200px;
}

.move {
  position: sticky;
  bottom: 0;
}

1111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>
<div class="block">
  AAAA
  <div class="move">
    BBBB
  </div>
</div>
222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>

Cuando tengo "mover" configurado en ''top: 0'' se pega a la parte superior del bloque rosa, pero cuando se establece en ''bottom: 0'' ya no parece fijo / pegajoso.

Answer 1

Está funcionando bien, pero no verá nada. Echemos un vistazo a la definición:

Un elemento de posición pegajosa es un elemento cuyo valor de posición calculado es pegajoso. Se trata como si estuviera relativamente posicionado hasta que el bloque que lo contiene cruza un umbral específico (como establecer top to value distinto a auto) dentro de su raíz de flujo (o el contenedor dentro del cual se desplaza), en cuyo punto se trata como "atascado" hasta que cumple con el límite. borde opuesto de su bloque que contiene ^ref

Dé un gran margen al elemento de bloque para ocultarlo de la pantalla y luego comience a desplazarse lentamente

.block {
  background: pink;
  width: 50%;
  height: 200px;
  margin-top:120vh;
}

.move {
  position: sticky;
  bottom: 0;
}

<div class="block">
  AAAA
  <div class="move">
    BBBB
  </div>
</div>

Notará que cuando su elemento muestra que el BBB está superponiendo en la AAA hasta que alcanza su lugar inicial. Este es el comportamiento pegajoso cuando se usa la bottom:0 . Así que nuestro elemento se mantiene en position:relative y cuando el contenedor comienza a salir de la pantalla en la parte superior, se adhiere a su parte inferior hasta que alcanza el borde opuesto (la parte superior del contenedor).

Exactamente lo mismo sucede con top:0 pero en la dirección opuesta:

.block {
  background: pink;
  width: 50%;
  height: 200px;
  margin-bottom:120vh;
}

.move {
  position: sticky;
  top: 0;
}

<div class="block">
  AAAA
  <div class="move">
    BBBB
  </div>
</div>

Por lo tanto, sticky no colocará el elemento en la parte superior o inferior, pero decidirá cómo se bloqueará el elemento para que sea visible cuando el contenedor desaparezca de la pantalla.

Para obtener lo que desea, debe colocar el elemento en la parte inferior con otras propiedades y mantenerlo pegajoso.

Aquí hay un ejemplo donde coloco el elemento en la parte inferior utilizando flexbox y especifico que necesito que esté pegajoso en la parte inferior.

.block {
  background: pink;
  width: 50%;
  height: 200px;
  margin-top:120vh;
  display:flex;
  flex-direction:column;
}

.move {
  margin-top:auto;
  position: sticky;
  bottom: 0;
}

<div class="block">
  AAAA
  <div class="move">
    BBBB
  </div>
</div>

Por lo tanto, position:sticky nunca definirá la posición del elemento como lo hacemos con absolute o fixed pero definirá cómo se bloqueará el elemento cuando exista un comportamiento de desplazamiento.

Aquí hay más ejemplos para entender mejor:

.block {
  background: pink;
  display:inline-flex;
  vertical-align:top;
  height: 200px;
  max-width:100px;
  flex-direction:column;
  margin:100vh 0;
}

.e1 {
  position: sticky;
  top: 0;
}
.e2 {
  margin-top:auto;
  position: sticky;
  top: 0;
}
.e3 {
  position: sticky;
  top: 20px;
}
.e4 {
  position: sticky;
  bottom: 0;
  margin:auto;
}
.e5 {
  position: sticky;
  bottom: 0;
  top:0;
  margin:auto;
}
.e5 {
  position: sticky;
  bottom: 0;
}

<div class="block">
  <div class="e1">Top sticky</div>
</div>
<div class="block">
  <div class="e2">Top sticky at bottom (nothing will happen :( )</div>
</div>
<div class="block">
  <div class="e3">Top sticky at 10px</div>
</div>
<div class="block">
  <div class="e4">bottom sticky in the middle</div>
</div>
<div class="block">
  <div class="e5">top/bottom sticky in the middle</div>
</div>
<div class="block">
  <div class="e6">bottom sticky at the top (nothing will happen :( )</div>
</div>

Otro error común con sticky es olvidar la altura / anchura del elemento en relación con la de su padre. Si la altura del elemento es igual a la altura del elemento principal (que contiene el bloque), lógicamente no habrá un comportamiento pegajoso porque ya estamos en el borde opuesto .

.block {
  background: pink;
  display:inline-flex;
  vertical-align:top;
  height: 200px;
  max-width:100px;
  flex-direction:column;
  margin:100vh 0;
}

.block > div {
  border:2px solid;
} 
.e1 {
  position: sticky;
  top: 0;
}

<div class="block">
  <div class="e1">Top sticky</div>
</div>
<div class="block">
  <div class="e1" style="height:100%">I will not stick</div>
</div>
<div class="block">
  <div class="e1" style="height:80%">I will stick a little ..</div>
</div>
<div class="block" style="height:auto">
  <div class="e1">I will not stick too</div>
</div>

Observe el último caso en el que la altura del padre se establece en auto (valor predeterminado), por lo que su altura se definirá por su contenido, lo que hará que el elemento adhesivo tenga la misma altura que el bloque que contiene y no sucederá nada porque no habrá Espacio para el comportamiento pegajoso.

Answer 2

Prueba el siguiente código:

.block {
  background: pink;
  width: 50%;
}

.movetop {
  position: sticky;
  top: 0;
  background: #ccc;
  padding: 10px;
  color: #ae81fe;
  z-index: 1;
  border: 1px solid #777;
}

.movebot {
  background: #ccc;
  padding: 10px;
  color: #ae81fe;
  position: -webkit-sticky;
  position: sticky;
  border: 1px solid #777;
}

.movebot {
  bottom: 0
}

11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>
<div class="block">
  <div class="movetop">
    header
  </div>
  content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
  <div class="movebot">
    footer
  </div>
</div>
222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>

Puede encontrar más información sobre la position:sticky en gedd.ski/post/position-sticky

Espero que ayude.

Paz. 🖖