Sticky position

Olá pessoal, tudo certo?

Hoje falaremos de sticky position o novo posicionamento disponível no WebKit que permite-lhe alterar o comportamento de um elemento entre fixo e relativo sem javascript.

Baseado no post de Eric Bidelman sobre sticky position resolvi escrever este post e trazer um exemplo.

Atualmente quando queremos algum elemento html fixo na tela utilizamos position: fixed;, porém se este elemento está por padrão na parte inferior da sua página e você quer que ele fique fixo no topo quando o usuário descer o conteúdo. Bem, é necessário utilizar javascript! Criei este exemplo testado apenas no chrome 21 stable.

Em um dos últimos releases do webkit foi adicionado o valor sticky (prefixado pelo browser) sugerido por Edward O’Connor . Este valor permite-lhe utilizar elemento com comportamento position: relative; por padrão até o browser descer a página com um certo offset, a partir deste momento o elemento se comporta como se estivesse com  position: fixed;.


.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
top: 20px;
 }

Este bloco indica que quando o elemento possuir um offset top: 20px; do elemento pai, ele se comportará como position: fixed;.

Para melhor ilustrar criei este exemplo testado apenas no chrome canary 23.

É isso, este post era para mostrar o que foi proporcionado com a adição do posicionamento sticky (apenas no webkit até o momento).

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s