El posicionamiento sticky, como decíamos al principio de la unidad, es una mezcla entre posición relativa y fija.
Inicialmente el elemento ocupa una posición relativa pero cuando se hace scroll, en lugar de desplazarse y quedar oculto, queda fijo y visible en la parte que indiquemos de la pantalla.
Para colocar el elemento en la posición deseada disponemos de las propiedades top, botton, right y left. Si no usamos una de estas propiedades no tendrá efecto la propiedad sticky.
Normalmente se suele utilizar para que el menú superior permanezca siempre visible en la parte superior, para ello usaremos la propiedad top para que no quede muy pegado al borde superior.
Por ejemplo con top: 5px; quedará a 5 px. de la parte superior.
Para verlo hemos aplicando position: sticky; top: 5px; al encabezado de este punto, observa como al hacer scroll y desplazar la página, el encabezado no desaparece y queda "fijo" en la parte superior.
Si queremos que un elemento quede anclado en la parte inferior de la página utilizaremos position: sticky; bottom: 5px;.
Podemos usar ambos posicionamientos sticky (top y bottom) a la vez para diferentes elementos.
Para ver mejor el efecto vamos a añadir unos parrafos de texto "lorem ipsum"
lorem ipsum
lorem ipsum
lorem ipsum
Por ejemplo, el párrafo en color azul que viene a continuación tiene position: sticky; bottom: 5px;.
Fijado al pie
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.