Posicionamiento Sticky para Diseños Dinámicos
La posición sticky combina aspectos de las posiciones relativa y fija. Cuando un elemento tiene posición sticky, se comporta como un elemento posicionado relativamente hasta que alcanza un cierto umbral en la página. En ese momento, cambia a comportarse como un elemento fijo.
position: sticky;
Consideremos la siguiente ilustración. El elemento con el contenido de texto I am sticky
tiene la posición sticky.
Cuando un elemento está dentro de un contenedor, y el contenedor permanece dentro del viewport, el elemento se comporta como si estuviera posicionado relativamente. Sin embargo, cuando una parte del contenedor principal sale del viewport, el elemento queda fijo en su lugar mientras alguna parte del contenedor permanezca visible en la pantalla. Una vez que todo el contenedor sale del viewport, se reactiva la posición relativa y el elemento desaparece junto con el contenedor.
Realicemos una práctica y creemos un par de secciones con títulos sticky. Así, el usuario siempre podrá ver el título de la sección que está leyendo en ese momento, y luego este desaparecerá al hacer scroll.
index.html
index.css
Nota
Es importante mencionar que debemos especificar la propiedad
top
obottom
, para que el navegador pueda entender dónde esperamos que se adhiera un elemento.
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Can you show me an example of how to use sticky positioning with section titles?
What does the CSS look like for making section titles sticky?
Can you explain more about the importance of the `top` or `bottom` property with sticky positioning?
Awesome!
Completion rate improved to 2.04
Posicionamiento Sticky para Diseños Dinámicos
Desliza para mostrar el menú
La posición sticky combina aspectos de las posiciones relativa y fija. Cuando un elemento tiene posición sticky, se comporta como un elemento posicionado relativamente hasta que alcanza un cierto umbral en la página. En ese momento, cambia a comportarse como un elemento fijo.
position: sticky;
Consideremos la siguiente ilustración. El elemento con el contenido de texto I am sticky
tiene la posición sticky.
Cuando un elemento está dentro de un contenedor, y el contenedor permanece dentro del viewport, el elemento se comporta como si estuviera posicionado relativamente. Sin embargo, cuando una parte del contenedor principal sale del viewport, el elemento queda fijo en su lugar mientras alguna parte del contenedor permanezca visible en la pantalla. Una vez que todo el contenedor sale del viewport, se reactiva la posición relativa y el elemento desaparece junto con el contenedor.
Realicemos una práctica y creemos un par de secciones con títulos sticky. Así, el usuario siempre podrá ver el título de la sección que está leyendo en ese momento, y luego este desaparecerá al hacer scroll.
index.html
index.css
Nota
Es importante mencionar que debemos especificar la propiedad
top
obottom
, para que el navegador pueda entender dónde esperamos que se adhiera un elemento.
¡Gracias por tus comentarios!