Estoy probando un div (más tarde: # elemento azul) para subir mientras me desplazo hacia abajo y dejar que deje de moverse hacia arriba en un punto determinado, incluso si continúo desplazándome.

He intentado usar:

Align-self: flex-end; Element se quedó en la cima. abajo: 0px; El elemento permaneció en la parte inferior todo el tiempo, pero ya no se pudo desplazar. margen superior: automático; No empujó el elemento hacia abajo. margen inferior: automático; No empujó el elemento hijo hacia abajo.

Html

<div id="brown-container">
 <div id="green-element">Some stuff</div>
 <div id="blue-element>Some stuff</div>
</div>

Css

#brown-container {
 top: 10%
 height: 80%
}
#green-element {
 height: 1000px
}
#blue-element {
 code: that did not work;
}

Tengo un ejemplo de png a continuación

enter image description here

El elemento # verde debería desplazarse normalmente.

1
Covy 6 oct. 2019 a las 13:15

1 respuesta

La mejor respuesta

Puede usar position: sticky; con el conjunto top usando altura de la ventana gráfica

#brown-container {
  top: 10%;
  height: 80%
}

#green-element {
  height: 500px;
  background: green;
}

#blue-element {
  background: blue;
  position: sticky;
  top: 75vh;
}

#other-element {
  height: 500px;
  background: yellow;
}
<div id="brown-container">
  <div id="green-element">Some stuff</div>
  <div id="blue-element">Some stuff</div>
  <div id="other-element">Other stuff</div>
</div>
3
Nidhin Joseph 6 oct. 2019 a las 10:25