Cómo crear pie de página pegajoso sólo para CSS
Normalmente, necesitamos JavaScript para realizar efectos de desplazamiento Relacionados con las diferentes acciones de los usuarios en las páginas web. El guión hace el trabajo de el seguimiento del desplazamiento hacia arriba o hacia abajo lleva una página, y desencadena una acción cuando se alcanza un umbral de altura.
No es particularmente malo usar JavaScript para efectos de desplazamiento. De hecho hay casos más complicados que son imposible de resolver sin JavaScript. Sin embargo hay Hacks CSS que puede reemplazar estos scripts a veces.
Este post te va a mostrar how para crear pie de página revelar efectos en el desplazamiento de página usando CSS. Usaremos dos casos de uso para demostrar esto: uno para toda la página (ver demostración) y otro para elementos de páginas individuales, como artículos.
Página completa
Necesitamos crear un pie de página que aparece desde debajo de la página mientras el usuario se desplaza hacia abajo. Además, cuando están desplazando la página hacia arriba, el pie de página necesita estar oculto debajo de la página de nuevo.
Para lograr este objetivo, primero tenemos que crear un pie de página con posición fija en la parte inferior de la pantalla.
1. Crear un pie de página fijo
Vamos a añadir algún contenido y un pie de página a la página primero. Estoy usando las etiquetas HTML En mi demostración, se muestra una imagen de murciélago dentro del pie de página para un efecto no tan espeluznante, pero puedes elegir cualquier otra imagen que desees.. Lorem ipsum dolor sit amet ... Mudarse a CSS, eliminar cualquier espacio alrededor de Dar algunas dimensiones ( Aplica el Colorea tanto el Selecciona el De esta manera, habrá suficiente espacio en la parte inferior para que el pie de página se visible cuando el usuario se desplaza por la página. Eso es. El efecto revelador de pie de página para una página web completa está hecho. Echa un vistazo a la demo de Codepen a continuación. Esta técnica se puede utilizar para un elemento HTML individual (con un pie de página) que es Tiempo suficiente para un efecto de desplazamiento de página adecuada. El método es un poco pirateado, ya que actualmente no funciona en Chrome e IE, pero tiene una alternativa decente. Primero, vamos a crear un artículo largo con un pie de página. Para promover el código semántico, elegí Lorem ipsum dolor sit amet ... Abajo puedes ver el estilo básico Del artículo y del pie de página.. Mi artículo se ve así. Por supuesto, también puedes usar otras reglas básicas de estilo.. El pie de página anterior fue arreglado, este va a ser pegajoso. Aplica el los Puede ajustar su valor a su gusto, ya que determina el punto en el que el pie de página comienza a aparecer o desaparecer mientras el usuario se desplaza hacia arriba o hacia abajo.. Dar el mismo valor para el margen inferior del artículo, para que haya suficiente espacio en la parte inferior para revelar el pie de página completo. Ahora necesitamos Una abertura junto al final del artículo. a través del cual podemos ver el pie de página adhesivo desplazándose hacia arriba y hacia abajo. Para lograr esto, reemplace el los Finalmente, vamos coloca el pie de página detrás del artículo utilizando la Y eso es todo, el elemento de la página individual con el efecto de revelado en el desplazamiento está hecho. Echa un vistazo a la pluma de Codepen a continuación. También puede encontrar ambos casos de uso en nuestra página de Github. y para la semantica. sin embargo,
Sigue desplazándote hasta que veas el pie de página.
etiqueta por estableciendo márgenes a 0, y hazlo suficientemente largo por añadiendo una altura personalizada para inducir el desplazamiento (si el contenido del cuerpo en tu página es lo suficientemente largo como para provocar el desplazamiento, no tienes que darle una altura).anchura y altura) al pie de página, y arreglar su posición a la parte inferior de la pantalla con el posición: fijo y abajo: 0; propiedades. body font-family: Crimson Text; tamaño de letra: 13 puntos; margen: 0; pie de página ancho: 100%; altura: 200px; posición: fijo abajo: 0; color de fondo: # DD5632;
2. Ocultar el pie de página
índice z: -1 gobernar al pie de página para Colócalo detrás de todos los demás elementos. en la pagina. y etiquetas blancas para cubrir el pie de página. cuerpo, html color de fondo: #fff; pie de página ancho: 100%; altura: 200px; posición: fijo abajo: 0; color de fondo: # DD5632; índice z: -1;
3. Ajuste el margen inferior
margen inferior del etiqueta igual a la altura del pie de página (en mi ejemplo 200px). cuerpo altura: 1000px; margen: 0; margen inferior: 200px;
Elementos de página individuales
1. Crear un artículo largo
y .
Articulo 1
articulo ancho: 500px; color de fondo: # FEF9F3; relleno: 20px 40px; artículo> pie de página altura: 100px; color de fondo: # FE0178; body font-family: cormorant garamond;
2. Hacer el pie de página pegajoso
posición: pegajoso gobernar al pie de página, por lo que se moverá dentro de los límites del artículo pero aún así mantener su posición en la pantalla mientras el usuario se desplaza hacia arriba y hacia abajo. artículo> pie de página altura: 100px; color de fondo: # FE0178; posición: -webkit-sticky; posición: pegajosa; inferior: 80px;
abajo: 80px Regla fija la posición del pie de página. 80 px por encima de la parte inferior del artículo. articulo ancho: 500px; color de fondo: # FEF9F3; relleno: 20px 40px; margen inferior: 80px;
3. Añadir un fondo parcialmente transparente
color de fondo del artículo con una gradiente lineal imagen de fondo, que desde la parte superior del artículo hasta la parte superior del pie de página es coloreado con el color de fondo del artículo, y la porción restante al fondo es hecho transparente. articulo ancho: 500px; relleno: 20px 40px; imagen de fondo: gradiente lineal (hacia abajo, # FEF9F3 calc (100% - 120px), transparente 0); margen inferior: 80px;
calc (100% -120px) La función CSS calcula el Altura completa del artículo menos el pie de página.. En mi ejemplo, es de 120 px (100 px para la altura). + 20px para el relleno).
4. Coloque el pie de página hacia atrás
índice z: -1 Regla CSS. artículo> pie de página altura: 100px; color de fondo: # FE0178; posición: -webkit-sticky; posición: pegajosa; inferior: 80px; índice z: -1;
