20

O sticky é um novo valor da propriedade position e eu li um pouco e entendi que com ele é possível criarmos elementos HTML que se comportam em um momento como position: fixed e em outro como position: relative dependendo de um valor do offset.

Mas não entendi como isto funciona na pratica, eu também gostaria de saber sobre a compatibilidade, qual o suporte e quando vou precisar dos prefixos como -webkit- e -moz-.

1 Resposta 1

6

São várias perguntas em uma só, vamos por parte.

  • Mas não entendi como isto funciona na pratica...

Aqui estão dois exemplos do sticky funcionando Sticky 1. Sticky 02 Note que ao realizar o scrollda página a div do topo que contém a descrição acompanha o scroll e ao encontrar outra div ela muda. O que acontece é que o elemento é tratado como relativo position: relative; até que ele chegue ao limite especificado, no caso dos exemplos top: 10px;, depois disso ele é tratado como fixo position: fixed;

  • eu também gostaria de saber sobre a compatibilidade...

Chrome, I.E, Opera - Não suportado; Firefox (Gecko) - Versão 32 (32.0); Safari - Versão 6.1 -webkit-

  • qual o suporte e quando vou precisar dos prefixos como -webkit- e -moz-

Safari - Versão 6.1 -webkit-

Sugiro a leitura da documentação em Position

2
  • Não são várias, são só 3 perguntas em uma só e no final das contas 2 são tecnicamente a mesma, prefixo e compatibilidade se referem a mesma situação, e comportamento da propriedade é o basico da pergunta.
    – Syzoth
    Commented 23/11/2016 às 12:15
  • 4
    Essa parte do suporte está meio esquisita. caniuse.com/#feat=css-sticky - e é static e fixed, nada de relative. Só é relative quando se trata de tabelas.
    – Largato
    Commented 23/11/2016 às 12:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .