CSS HTML

Como fazer um elemento acompanhar a barra de rolagem?

20 de abril de 2020

Como fazer um elemento acompanhar a barra de rolagem?

Neste artigo você vai aprender a fazer um elemento acompanhar a barra de rolagem apenas com CSS, para você utilizar nos seus projetos web!

elemento que acompanha a barra de rolagem capa

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:

elemento que acompanha a tela ex1

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

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x