div que acompanha o scroll

brunocasado · Julho 11, 2008

Galera não sei se estou postando no lugar certo, bom vamos lá

Alguns sites geralmente do lado direito há uma div que acompanha o rolar do scroll ela sempre fica a vista do usuario mesmo se descer totalmente a pagina.

e a div desce junto com o scroll.

galera como poderei fazer um igual?

seth · Julho 11, 2008

Fiz um código para você e ai está:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 

<title> CAIXA FIXA </title>

<style type="text/css">

#caixa { position: fixed; left:600px; background-color: white;  }

#tabela { width: 100%; height: 3000px; }

</style>

</head>

<body>

<div>

<p id="caixa" style="width: 200px; height: 200px; border: 3px solid black;"> UUU </p>

</div>

<table id="tabela">

<tr  style="background-color: purple;   " >

<td > ooo</td>
</tr>
</table>

</body>
</html>

É só você usar a propriedade position: fixed; left: [posição para a esquerda]; top: [posição para baixo]; no elemento que quiser que não se mova...

Veja o exemplo que você entenderá melhor ^_^

AVISO: Isso só funcionará no Internet Explorer com o Doctype e com código valido...

falou E VLW!

brunocasado · Julho 11, 2008

opa sakei cara vlw, e como faz dakele jeito q vai descendo suave?

Diogo Freitas · Julho 13, 2008

po não precisa desse código todo...basta chegar à folha css e colocar a div como position: fixed e já está

KaKarotto · Julho 13, 2008

Position fixed não funciona no internet Explorer 6. É necessário uma gambi para tal.

Fazer ele descer suavemente é com javascript.

brunocasado · Julho 17, 2008

ai galera eu fiz esse negocio do position:fixed mas me deparei com 1 problema

ao diminuir a tela o elemento que apliquei o position:fixed fica bagunçado..... exemplo meu monitor e de resolução de 1280X1024 c eu diminui-lo o elemento irá para otra posiçao... como posso resolve isso??

Diogo Freitas · Julho 18, 2008

é mesmo assim, com position:fixed a div fica sempr e na mesma posição, ou seja, pode acontecer de com a diminuição da tela fique por cima ou por baixo de outras

brunocasado · Julho 18, 2008

hmm, e qual poderia ser a solução para o meu problema? presciso que essa div fique do lado de fora do palco do site... e ao descer com o scroll ou fiquer fixo mesmo ou intao descer suave mas mesmo se o cara mudar a resolução da tela continue la... alguém sabe fazer isso?

Diogo Freitas · Julho 18, 2008

bom, eu não sei se dá para colocar position fixed apenas em x ou em y,,, se der ta resolvido o problema..se não adopta os concelhos dos outros membros

brunosfera · Agosto 4, 2017

Em 11/07/2008 em 18:57, seth disse:
Fiz um código para você e ai está:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 

<title> CAIXA FIXA </title>

<style type="text/css">

#caixa { position: fixed; left:600px; background-color: white;  }

#tabela { width: 100%; height: 3000px; }

</style>

</head>

<body>

<div>

<p id="caixa" style="width: 200px; height: 200px; border: 3px solid black;"> UUU </p>

</div>

<table id="tabela">

<tr  style="background-color: purple;   " >

<td > ooo</td>
</tr>
</table>

</body>
</html>
É só você usar a propriedade position: fixed; left: [posição para a esquerda]; top: [posição para baixo]; no elemento que quiser que não se mova...

Veja o exemplo que você entenderá melhor ^_^

AVISO: Isso só funcionará no Internet Explorer com o Doctype e com código valido...

falou E VLW!
Expand

nada haver!

Entrar

div que acompanha o scroll

Pergunta

brunocasado

Link para o comentário

Compartilhar em outros sites

9 respostass a esta questão

Posts Recomendados

seth

Link para o comentário

Compartilhar em outros sites

brunocasado

Link para o comentário

Compartilhar em outros sites

Diogo Freitas

Link para o comentário

Compartilhar em outros sites

KaKarotto

Link para o comentário

Compartilhar em outros sites

brunocasado

Link para o comentário

Compartilhar em outros sites

Diogo Freitas

Link para o comentário

Compartilhar em outros sites

brunocasado

Link para o comentário

Compartilhar em outros sites

Diogo Freitas

Link para o comentário

Compartilhar em outros sites

brunosfera

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades