Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Daniel Cpz

[Resolvido] Mover div ao delizar scroll

Por , em Javascript

Recommended Posts

Daniel Cpz    0

Daniel Cpz
Postado

td bem ae pessoal...

 

tenho uma sidebar que é dentro da area do site fixa, quando desce o site ela não desce, quero que conforme deslize o site

pra baixo para baixo ou pra cima essa sidebar role junto, como faser ?

 

um exemplo ajuda...

 

até mais

Compartilhar este post

Link para o post
Compartilhar em outros sites

FK.    0

FK.
Postado

Atribua a propriedade position do elemento para fixed. Com isso o elemento ficará fixo em alguma posição do browser especificado de acordo com as propriedades top e left. Exemplo:

 

<html>
   <head>
       <title>Position fixed</title>
       <style type="text/css">
           #height {
               height: 2500px;
               background-color: red;
           }
           #fixed {
               position: fixed;
               top: 10px;
               left: 250px;
               color: blue;
           }
       </style>
   </head>
   <body>
       <div id='fixed'>Fixed</div>
       <div id='height'>Height</div>        
   </body>
</html>

 

Quando você desce/sobe o scroll, a div Fixed vem junto, já que, tem uma div Height com uma altura grande e uma cor de fundo vermelha logo a baixo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel Cpz    0

Daniel Cpz
Postado

obrigado por responder...

 

eu não me expressei bem ao postar o tópico,

a sidebar já é fixa, preciso deslizar o conteúdo dela junto ao site...

 

do jeito que você mostrou ai no exemplo deslizar o conteúdo da parte fixed,

não adianta mudar para absolute, porque ai conforme vai descendo a parte branca vazia vai aparecendo e não quero que isso ocorra...

 

RESOLVIDO GALERA

 

consegui elaborar aqui se alguém precisar edit

 



<script>
function go(){
var
topo = document.body.scrollTop;
tamanho = document.body.clientHeight;
tamanhoscroll = document.body.scrollHeight;

tamanho_soma = 	eval(tamanho+topo);


scrollsidebar = document.getElementById('sidebar').scrollTop;

scrolldifinition = topo+1;
document.getElementById('sidebar').scrollTop = scrolldifinition;

if(tamanho_soma == tamanhoscroll){
document.body.style.background = 'red';
document.getElementById("info").innerHTML = topo+'<br>'+tamanho+'<br>'+tamanhoscroll+'<br>sidebar scroll'+scrollsidebar;

}else{
document.body.style.background = 'white';
document.getElementById("info").innerHTML = topo+'<br>'+tamanho+'<br>'+tamanhoscroll+'<br>sidebar scroll'+scrollsidebar;
}

}

window.setInterval('go()', 100);

</script>

<body>
<div id="info" style="position:fixed; width:200px; height:100px; background:blue; right:100px;">

</div>



<div id="sidebar" style="overflow:auto; position:fixed; width:300px; height:400px; background:yellow; right:500px;">
a<br>
b<br>
c<br>
d<br>
e<br>
f<br>
g<br>
h<br>
i<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
</div>

a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
</body>

 

conforme deliza a pagina a sidebar desliza junto é um exemplo

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito