Como criar um elemento pegajoso em html

Para melhorar a aparência geral de uma página da web, os elementos adicionados devem ser posicionados de acordo. Especificamente, o CSS “posição”Propriedade define o posicionamento de um elemento em um documento. A localização é definida pelas propriedades direita, esquerda, superior e inferior. No entanto, a posição padrão dos elementos é estática, na qual os elementos residem com o fluxo normal da página.

Este blog discutirá a propriedade CSS Position e o método para criar um elemento pegajoso no HTML.

O que é propriedade de posição CSS?

A propriedade de posição CSS especifica o método de posicionamento dos elementos HTML, que podem ser uma absoluta, pegajosa, estatística, fixa, herdada, relativa ou inicial.

Sintaxe

Posição: Sticky | Absoluto | estático | fixado | Relativo | Herito | Inicial

A sintaxe dada acima mostra que a propriedade de posição tem valores diferentes. Eles podem ser atribuídos de acordo.

Agora, vamos verificar o procedimento para criar elementos pegajosos em HTML.

Qual é a posição CSS: pegajoso?

O elemento html com um “pegajosoA posição tem uma posição relativa até atingir um ponto e depois age como um elemento pegajoso.

Vamos passar pelo exemplo simples para entender o conceito de posição pegajosa CSS.

Exemplo: como criar um elemento pegajoso em html?
No arquivo html, adicione

para o cabeçalho,

para o parágrafo, e ter o nome da classe “pegajoso”. Então, adicione um

tag tendo lista de ordem aninhada

com uma lista
1. .

   Observação: Tomamos uma longa lista para que, ao rolar nossa página, você possa observar o comportamento do elemento pegajoso.

   Html

   Notas pegajosas: veja o efeito do elemento pegajoso

   
   

   Posição: pegajoso

   
   Esta é minha lista de tarefas!
   

   
   

   
   
   1. Gerenciador de chamada
   
   
   2. Encontro com funcionários
   
   
   3. Enviar relatório
   
   
   4. Vá ao médico
   
   
   5. Agendar um voo
   
   
   6. Dar uma volta.
   
   
   7. Vá para a mercearia.
   
   
   8. Assistir TV
   
   
   9. Algum texto.
   
   
   10. Algum texto.
   
   
   11. Algum texto.
   
   
   12. Algum texto.
   
   
   13. Algum texto.
   
   
   14. Algum texto.
   
   
   15. Algum texto.
   
   
   16. Algum texto.
   
   
   17. Algum texto.
   
   
   18. Algum texto.
   
   
   19. Algum texto.
   
   
   20. Algum texto.
   
   
   21. Algum texto.
   
   
   22. Algum texto.
   
   
   23. Algum texto.
   
   
   24. Algum texto.
   
   
   25. Algum texto.
   
   
   26. Algum texto.
   
   
   27. Algum texto.
   
   
   28. Algum texto.
   
   
   29. Algum texto.
   
   
   30. Algum texto.
   
   
   
   

   Em seguida, forneceremos estilo à div chamada Sticky:

   • Aqui, ".pegajoso”Representa a classe em que as propriedades do estilo precisam ser aplicadas.
   • Dentro dos colchetes encaracolados, atribuiremos o “posição”Valor da propriedade como“pegajoso”.
   • O "principal"É definido como"0”.
   • O "cor de fundo" é "#00154f”.
   • Dê alguns “preenchimento”Para a div, definindo seu valor como“40px”.
   • ““tamanho da fonte" como "30px”.
   • ““cor"De fontes é definido como"branco”.

   CSS

   .pegajoso
   Posição: pegajoso;
   topo: 0;
   Background-Color: #00154f;
   preenchimento: 40px;
   tamanho da fonte: 30px;
   cor branca;
   

   Salve o arquivo HTML e abra -o no navegador para ver a saída:

   Dica de bônus

   Utilizando o “hsla ()”Método, você pode definir um plano de fundo transparente para o elemento adesivo adicionado da seguinte maneira:

   Background-Color: HSLA (0, 100%, 90%, 0.8);

   Saída

   É assim que o elemento se mantém na posição específica definindo o CSS “posição”Valor da propriedade como“pegajoso”.

   Conclusão

   O "pegajosoPosição no CSS, faz a posição do elemento alternar entre relativa e fixa. Como resultado, o elemento adesivo adicionado é posicionado em relação ao rolo até atingir um certo ponto quando se comporta como um pegajoso. Você também pode ajustar o nível de transparência do elemento adesivo adicionado, utilizando o método hsla (). Este blog o guiou sobre fazer elementos transparentes simples e pegajosos.