Neste artigo você vai aprender a fazer um elemento acompanhar a barra de rolagem apenas com CSS, para você utilizar nos seus projetos web!
Fala programador(a), beleza? Bora aprender coisa nova!
A ideia por trás de deixar um elemento acompanhando a barra de rolagem
É deixar ele com a regra de position como fixed
Deste jeito, o elemento fica fixo na tela e respeita qualquer posição imposta por regras de CSS
Então depois ajustamos seu top, left, right ou bottom
Da maneira que o layout pede que fique o elemento
Vamos a um exemplo prático:
<!DOCTYPE html>
<html>
<head>
<title>Elemento que acompanha a barra de rolagem</title>
<meta charset="utf-8">
</head>
<body>
<div id="fixo"></div>
</body>
</html>Aqui temos uma página web simples, com um elemento que vai ficar fixo na tela
Agora vamos ao CSS que vai posicionar ele:
body {
height: 3000px;
}
#fixo {
position: fixed;
/* deixando o elemento na posição desejada */
right: 50px;
top: 200px;
/* apenas para aparência */
background-color: gold;
border: 1px solid red;
width: 100px;
height: 100px;
}
Veja que o truque se dá apenas nas 3 primeiras linhas de #fixo, position como fixed e uma regra para right e top, que são as posições do elemento na tela
Depois estilizamos o elemento com uma cor de fundo, altura e largura, para que o mesmo apareça, mas isso não é necessário
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
Deixamos o body com uma altura grande também, para que a página tenha barra de rolagem, não é necessário
Veja como ficou no navegador:
Perceba que a página não está posicionada no topo (ver barra de rolagem)
E o elemento ainda continua presente, ou seja, ele está acompanhando a barra de rolagem
E assim, resolvemos nosso problema! 🙂
Conclusão
Neste artigo vimos como fazer um elemento acompanhar a barra de rolagem
Utilizamos position fixed, para deixar o elemento fixo na tela, com instruções de right e top, para também deixá-lo posicionado na parte direita da tela
A posição do elemento deve ser de acordo com o layout, a única regra necessária é a de position com fixed
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube