Quiero que el recuadro de en medio a la izquierda pase a estar arriba a la izquierda cuando se haga scroll, como podria hacerlo sin java (solo html y css)
-
position: sticky– YussefCommented el 17 sept. 2022 a las 19:54
-
1Por favor, aclara tu problema específico o proporciona detalles adicionales para resaltar exactamente lo que necesitas. Tal como está escrito, es difícil saber exactamente qué estás preguntando.– Comunidad BotCommented el 18 sept. 2022 a las 4:47
Añade un comentario
|
1 respuesta
parece ser que lo que necesitas es que cuando el usuario haga scroll el elemento quede arriba a la izquierda en posicion fija ¿no?.
Si es así, simplemente deberías de darle al div el estilo de css position: sticky
, con ello el elemento se quedará en un lugar fijo en la posición superior izquierda de la ventana al hacer scroll.
Cuando lo utilices, trata de tenerlo directamente en el contenedor principal, ya que es sobre el que actua. Te enlazo documentación para que puedas aplicarlo correctamente:
https://developer.mozilla.org/es/docs/Web/CSS/position
y aquí te dejo un ejemplo práctico:
div{
font-family:sans-serif;
}
.sticky{
position:-webkit-sticky;
position:sticky;
top:10px;
color:white;
padding:10px;
font-size:1.1em;
background-color:#e74c3c;
}
.long{
padding:1em;
height:25ch;
font-size:3em;
text-transform:uppercase;
<div class="long">
arrastra hacia abajo
</div>
<div class="sticky first">
esta barra es position sticky
</div>
<div class="long">
esto está debajo de la barra
</div>
<div class="long">
Scroll Further down
<div>