Simulando Position Fixed FF, IE, Opera

[micox 2]

Bom, todo mundo sabe que a propriedade position igual a fixed faz com que o elemento fique fixo na janela do browser

independente da movimentação da barra de rolagem.

 

Isto é uma verdade pra navegadores que seguem bem os padrões (OP, FF,etc) mas para o IE (Internet Explorer até o 7) isto não funciona. Simplesmente não funciona.

 

Publicado originalmente em: El micox - Simulando position fixed no Internet Explorer (IE) - sem javascript

 

Como resolver isto SEM JAVASCRIPT só no CSS?

 

Primeiramente imagine duas divs dentro de um documento:

 

- Uma das divs tem dimensões de 400x400, tem um texto gigantesco como conteúdo, porém seu overflow é scroll, o que permite que seja possível ler o conteúdo gigantesco.

 

- A outra div é uma pequena imagem de 25x25 que está posicionada exatamente sobre a div do conteúdo anterior.

 

...

 

Bom, se eu mexer a barra de rolagem da div do conteúdo não irá interferir em nada na movimentação da div que tem a imagem. A imagem continuará quieta sobre o texto.

 

Bingo!! Agora é só aumentar o tamanho da div com conteúdo pra ocupar a janela inteira.

 

Pra você não ter que quebrar a cabeça eu já deixei o código prontim só pra você inserir no seu documento (e fazer adaptações se achar necessário).

 

O Exemplo: Simulando position fixed no Internet Explorer - IE

 

O código pronto

 

<style type="text/css">	 /* FAZ OS POSITION FIXED NOS NAVEGADORES PADRÃO (não mexa) */	 .fixed { position: fixed !important; } </style> <!--[if lte IE 7]>	 <style type="text/css">		 /* FAZ O POSITION FIXED PARA O IE (não mexa).			 Para funcionar o DTD do documento deve estar correto. E não ser quirksMode			 By Micox - micoxjcg@yahoo.com.br - elmicox.com - elmicox.blogspot.com		  */		 .fixed { position: absolute !important; }		 body { height: 100% !important; width: 100% !important;				margin: 0 !important; position: relative;  }		 html { overflow-y: hidden !important;  }		 #newbody { position: relative !important; overflow-y: scroll !important;					height: 100% !important; width: 100% !important; margin: 0 !important; }	 </style> <![endif]-->  <style type="text/css">	 /* COLOQUE AQUI O RESTANTE DAS ESTILIZAÇÕES QUE NÃO TENHAM A VER COM POSITION FIXED		MAS NÃO DECLARE MARGINS, PADDINGS, POSITIONS, DIMENSÕES OU OVERFLOWS PARA HTML, BODY E NEWBODY	 */  </style>

Detalhes:

- Da mesma forma que está no exemplo, deverá haver um elemento pai chamado newbody que conterá todo o conteúdo não-fixed e, fora deste, deverão estar todos os elementos que desejar que sejam fixed. Olha o exemplo lá que vai entender.

- A página não pode ser renderizada no quirks mode, ou seja, deve estar com o document type definition (DTD) correto;

- Pode dar boró se alterar margin, padding, posições, dimensões ou overflows para os elementos HTML, body e newbody.

 

Perceba que não é aproveitamento de bug do IE. É apenas uma técnica que também funcionaria em outros navegadores se fosse necessário usar.

 

Muitos gringos já falaram sobre a técnica, mas aqui no Brasil parece que ninguém falou ainda. Estranho...:

[brcontainer 16]

Micox fiz um parecido, porem na minha opnião mais limpo.

 

Acredito que não tenha maneira mais limpa e rapida alem de funcional de se fazer o efeito

FIXED.

 

Detalhe: Esse código que montei baseado em metade de um que achei na NET não necessita de HACKs

pois a funcionalidade dele é igual para a maioria dos browsers populares.

 

Explicação:

o asterisco (*) é um seletor global com ele iremos zerar margens e espaçamentos internos

html,body iremos ocultar a barra de rolgam e tornamos eles um corpo PAI ao qual o BODY "deixará" de exercer sua original função.

com o #corpo iremos fazer ele "ser o novo corpo" aplicando 100% a suas dimeções para ele abranger toda a página visivel e lhe aplicaremos overflow:auto; para que acaso o conteudo seja maior ele não ultrapasse a tela assim ele termina a simulação do "body".

o #fixed é onde iremos posicionar o elemento(isso nem prescisa de explicação né???)

 

CSS:

*{
margin:0;
padding:0;
}
html,body{
overflow:hidden;
width:100%;
height:100%;
}
#fixed{
position:absolute;
top:50px;
left:20px;
background:#ddd;
}
#corpo{
width:100%;
height:100%;
overflow:auto;
}

HTML:

<html>
<body>
<div id="fixed">Fixo</div>
<div id="corpo">
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
teste<br />
</div>
</body>
</html>

[fabiomdj 0]

Silver...

seu codigo ta perfeito so tem uma coisa a div fica acima da barra de rolagem não tem como deixar ela abaixo não ?

[raPPa 0]

Pois é... também gostaria de saber como deixar a div por debaixo da barra de rolagem :S