Beto Muniz
  • Share

Dica CSS position: sticky

tech

👉 position: sticky é uma declaração CSS híbrida (fixed/relative) que nos permite manter elementos fixos no layout de forma relativa à posição da barra de rolagem e ao elemento-pai do elemento usando a declaração sticky.

🔄 Para definir o offset que torna o elemento sticky fixo ou relativo, utilizamos as propriedades top, bottom, left e right.

.sticky-element {
position: sticky;
top: 0;
}

💡 No exemplo abaixo, apliquei position: sticky na seção Share e a propriedade top: 0 para definir que o offset superior da barra de rolagem ativará o comportamento fixo da seção Share ao ser alcançado durante a rolagem.

😉 Bem legal, né?

  • Share It!
Copyright Beto Muniz © 2010-2020. All rights reserved.