Jump to content
Biel.

rolar página

Recommended Posts

Olá pessoal. Direto ao ponto. Abaixo temos div_1, div_2 e div_conteudo. div_1 está fixa. Ao rolar a página, gostaria que div_2 ficasse sempre abaixo da div_1 ;  lembrando que div_1 pode ter height de várias dimensões. Peque o código do jeito que está e teste no seu editor. Obrigado amigo.

 

<style>
* {margin:0; padding:0;}

.div_1 {
  position: sticky; 
  position: -webkit-sticky;
  top:0; left:0;right:0;  z-index:1; 
  font-size:25px; background-color:#c1c1c1; 
  margin-bottom:4px;
  height:200px;
}

.div_2 {
  font-size:25px; background-color:#acacac;
   position: sticky; 
  position: -webkit-sticky;
  top:0; left:0;right:0;  z-index:2; 
}

.div_conteudo{
padding-bottom:2000px;
background-color:#d1d1d1;

}  

</style>

</head>
<body>

<div class="div_1">
div_1
</div>

<div class="div_conteudo">
<div class="div_2">div_2 div_2 div_2 div_2 div_2 div_2 div_2 div_2 div_2 div_2 </div>

div_conteudo<br />div_conteudo<br />
div_conteudo<br />div_conteudo<br />
div_conteudo<br />div_conteudo<br />

</div>


</body>
</html>

 

Share this post


Link to post
Share on other sites

Bastando posicionar um elemento pai não a necessidade de se preocupar com os outros dois.

<div> <!-- Essa é fixa e não possui height pois sua altura será composta pelos filhos -->
  <div>
    <!-- Filho 1 fica em cima do 2 porque ele está primeiro -->
  </div>
  <div>
    <!-- Filho 2 fica em baixo do 1 -->
  </div>
</div>

 

Ah corrija esse seu css aí, tá meio zoneado e com alguns erros....

 

E se for questão de realocar elementos quando a página sofrer um evento de scroll, só com css não dá tem que usar javascript.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Biel.
      Olá pessoal. Direto ao ponto. Abaixo temos div_1 e div_2 . Note que div_1 tem position:fixed;  Gostaria que div_2 ficasse sempre abaixo da div_1, independentemente de quanto texto tenha a div_1
      <style> *{ margin:0; padding:0;} body{text-align:center;} .div_1{ width:100%; background:#7F9F55; position:fixed; z-index:0; } .div_2{ background-color:#D6D6D6; max-width:800px; margin: auto; position: relative; z-index:1; } </style> ...
      <div class="div_1"> div_1 <br /> div_1 <br /> div_1 <br /> div_1 <br /> div_1 <br /> </div> <div class="div_2"> div_2 <br /> </div>  
    • By Biel.
      Olá pessoal. Direto ao ponto. Pessoal inicialmente o código abaixo exibe na tela as imagens com tamanho fixo inicial width: 240px  e height:200px.   Ao passo que a tela vai diminuindo as imagens vão sendo redimensionada proporcionalmente; até aqui tudo ok. O problema é que quando as imagens vão diminuindo o height não diminui a partir de 200px e sim começa a diminuir à partir de 120px aproximadamente. Gostaria que o height começasse a diminuir à partir de 200px e não a partir de 120px. Como resolver este problema pessoal?
      <style> *{margin:0; padding:0;} #principal{ display: flex; max-width:830px; margin: auto; background-color:#D41FFF; } .conteudo{ display: flex; flex-wrap:wrap; margin:4px 2%; background-color:#D6D6D6; text-align:center; } .aprendiz{ margin-left:2.4444%; margin-bottom:20px; background:white; padding:4px 0px; } .imgRR{ width:240px; height:200px; } @media screen and (max-width:878px ){ .aprendiz{width:30.2%; background:red; margin-left:2.5555%; padding:4px 0px; } .imgRR{width:100%; height:auto; } } </style> ...
      <div id="principal"> <div class="conteudo"> <div class="aprendiz"><img src="imagem01.png" class="imgRR" width="240" height="200" /></div> <div class="aprendiz"><img src="imagem01.png" class="imgRR" width="240" height="200" /></div> <div class="aprendiz"><img src="imagem01.png" class="imgRR" width="240" height="200" /></div> <div class="aprendiz"><img src="imagem01.png" class="imgRR" width="240" height="200" /></div> <div class="aprendiz"><img src="imagem01.png" class="imgRR" width="240" height="200" /></div> <div class="aprendiz"><img src="imagem01.png" class="imgRR" width="240" height="200" /></div> </div> </div>  
    • By Biel.
      Pessoal o browser firefox tem uma recurso muito interessante para redimensionar tela, onde você clica,segura e arrasta . O recurso está no menu
      ferramentas-desenvolvimento web-design responsivo
       
      Alguém conhece alguma extensão para google chrome que redimensione o browser semelhante o recurso que tem no firefox para redimensionar tela, onde você clica,segura e arrasta ?
    • By Biel.
      Olá pessoal. Direto ao ponto. Pessoal ao clicar no item1 a div aprendiz fica oculta.  Gostaria que quando item1 fosse pressionado a div aprendiz ficasse oculta e comentada. 
      Quando pedisse para exibir código fonte da página mostrasse a div aprendiz comentada assim 
      <!--<div id="aprendiz" style="border:2px solid #F05;"> div aprendiz </div>--> ...
      <form> <select name="" id="WHY" size="2" required onChange="teste()" > <option value="item1">item1</option> </select> <br /><br /> <div id="aprendiz" style="border:2px solid #F05;"> div aprendiz </div> </form> ...
      <script> var div1 = document.getElementById("aprendiz").style.display="block" ; function teste(){ var itemSelecionado = document.getElementById("WHY").value; if(itemSelecionado == "item1"){ var div1 = document.getElementById("aprendiz").style.display="none" ; } } </script>  
    • By Biel.
      Olá pessoal. Direto ao ponto. Pessoal o código abaixo está funcionando normalmente. Gostaria que javascript,ajax,jquery impedisse php apenas de atualizar a página, mas não impedisse php de executar sua própria regra if elseif exibindo normalmente inputA e inputB quando item1 e item2 for pressionado. Como faço? Obrigado.
      <form method="post"> pagina1.php <!-- <select name="itemSelecionado" required size="2" onChange="submit()"> --> <select name="itemSelecionado" required size="2" onChange="this.form.submit()"> <option value="item1">item1</option> <option value="item2">item2</option> </select> <hr /> <?php if(@$_POST['itemSelecionado']=="item1"){ ?> input A - digite qualquer coisa <input type="text" name="inputA" value="" /> <?php } elseif(@$_POST['itemSelecionado']=="item2"){ ?> input B - digite qualquer coisa <input type="text" name="inputB" value="" /> <?php }?> </form>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.