Como criar um rodapé fixo somente para CSS
Normalmente, precisamos de JavaScript para executar efeitos de rolagem relacionados a diferentes ações do usuário em páginas da web. O roteiro faz o trabalho de rastreamento de quanto a rolagem para cima ou para baixo leva uma página, e desencadeia uma ação quando uma altura limite é atingida.
Não é particularmente ruim usar JavaScript para efeitos de rolagem. Na verdade, há casos mais complicados que são impossível resolver sem JavaScript. No entanto, existem Hacks de CSS que pode substituir esses scripts às vezes.
Esse post vai mostrar pra vocêsw para criar efeitos de revelação de rodapé na rolagem de página usando CSS. Usaremos dois casos de uso para demonstrar isso: um para a página inteira (veja a demonstração) e um para elementos de página individuais, como artigos.
Página inteira
Precisamos criar um rodapé aparece abaixo da página enquanto o usuário está rolando para baixo. Além disso, quando eles estão rolando a página de volta para cima o rodapé precisa estar escondido abaixo da página novamente.
Para alcançar este objetivo, primeiro temos que criar um rodapé com posição fixa na parte inferior da tela.
1. Criar um rodapé fixo
Vamos adicionar algum conteúdo e um rodapé para a primeira página. Estou usando as tags HTML Na minha demonstração, há uma imagem de morcego mostrada dentro do rodapé para um efeito não tão assustador, mas você pode escolher qualquer outra imagem que desejar. Lorem ipsum dolor sente-se amet… Mover para CSS, remova qualquer espaço em volta do Dê algumas dimensões ( Aplicar o Colora os dois Colocou o Desta forma, haverá espaço suficiente na parte inferior para o rodapé para Seja visível quando o usuário rola a página. É isso aí. O rodapé revela efeito para uma página web completa é feita. Confira a demonstração Codepen abaixo. Essa técnica pode ser usada para um elemento HTML individual (com um rodapé) longo O suficiente para um efeito de rolagem de página apropriado. O método é um pouco hacky, já que atualmente não funciona no Chrome e no IE, mas tem um retorno decente. Primeiro, vamos criar um artigo longo com um rodapé. Para promover o código semântico, eu escolhi Lorem ipsum dolor sente-se amet… Abaixo você pode ver o estilo básico do artigo e do rodapé. Meu artigo atualmente parece com isso. Claro que você também pode usar outras regras básicas de estilo. O rodapé anterior foi corrigido, este vai ser pegajoso. Aplicar o o Você pode ajustar seu valor ao seu gosto, pois determina o ponto em que o rodapé começa a aparecer ou desaparecer enquanto o usuário está rolando para baixo ou para cima.. Dê o mesmo valor para a margem inferior do artigo, de modo que haja espaço suficiente na parte inferior para revelar o rodapé completo. Agora precisamos uma abertura ao lado da parte inferior do artigo através do qual podemos ver o rodapé pegajoso rolando para baixo e para cima. Para conseguir isso, substitua o o Finalmente, vamos coloque o rodapé atrás do artigo usando o E é isso, o elemento de página individual com o efeito de revelação na rolagem está pronto. Confira a caneta Codepen abaixo. Você também pode encontrar os dois casos de uso em nossa página do Github. e para semântica. Contudo,
Continue rolando até ver o rodapé
tag por definindo margens para 0, e fazer isso por tempo suficiente adicionando uma altura personalizada para induzir a rolagem (se o conteúdo do corpo em sua página for longo o suficiente para causar rolagem, você não precisará dar uma altura).largura e altura) para o rodapé e consertar sua posição para a parte inferior da tela com o posição: fixa; e fundo: 0; propriedades. corpo font-family: Texto carmesim; tamanho da fonte: 13pt; margem: 0; rodapé largura: 100%; altura: 200 px; posição: fixa; fundo: 0; background-color: # DD5632;
2. Esconda o rodapé
z-index: -1 regra para o rodapé, a fim de coloque-o atrás de todos os outros elementos na página. e tags branco, a fim de cobrir o rodapé. corpo, html background-color: #fff; rodapé largura: 100%; altura: 200 px; posição: fixa; fundo: 0; background-color: # DD5632; z-index: -1;
3. Ajuste a margem inferior
margem de fundo do tag igual à altura do rodapé (no meu exemplo 200px). corpo altura: 1000 px; margem: 0; margem inferior: 200px;
Elementos individuais da página
1. Crie um artigo longo
e .
Artigo 1
artigo width: 500px; cor de fundo: # FEF9F3; preenchimento: 20 px 40 px; artigo> footer height: 100px; cor de fundo: # FE0178; corpo font-family: cormorant garamond;
2. Faça o rodapé pegajoso
posição: pegajosa regra para o rodapé, por isso vai passar dentro dos limites do artigo, mas ainda mantenha sua posição na tela enquanto o usuário está rolando para cima e para baixo. artigo> footer height: 100px; cor de fundo: # FE0178; posição: -webkit-sticky; posição: pegajosa; fundo: 80px;
inferior: 80px regra fixa a posição do rodapé 80px acima da parte inferior do artigo. artigo width: 500px; cor de fundo: # FEF9F3; preenchimento: 20 px 40 px; margem inferior: 80px;
3. Adicione um fundo parcialmente transparente
cor de fundo do artigo com um Gradiente linear imagem de fundo, que do topo do artigo até o topo do rodapé é colorido com a cor de fundo do artigo, e a parte restante para o fundo é feito transparente. artigo width: 500px; preenchimento: 20 px 40 px; imagem de fundo: gradiente linear (para baixo, # FEF9F3 calc (100% - 120px), transparente 0); margem inferior: 80px;
calc (100% -120px) Função CSS calcula o altura total do artigo menos o rodapé. No meu exemplo, é 120px (100px para altura + 20px para preenchimento).
4. Coloque o rodapé de volta
z-index: -1 Regra de CSS. artigo> footer height: 100px; cor de fundo: # FE0178; posição: -webkit-sticky; posição: pegajosa; fundo: 80px; z-index: -1;
