1

Olá, gostaria de saber como faço para uma div acompanhar a barra de rolagem da tela sendo que quando chegar no final da tela ela ficar posicionada abaixo do footer e quando apertar no botão fechar, ela sumir e o footer ficar posicionado direito assim como nesse link: https://gestao.vitta.me/

Tentei de toda forma e não consegui.

Vou mandar como tá meu código por enquanto.

<style type="text/css">
        .rodape {
            background-color: #00BFFF;
            text-align: center;
            font-size:8pt;
            font-family: Verdana;
            font-weight:bold;
            width:100%;
            position:fixed;
            bottom:0px;
            left:0px;
            
}    
    </style>
<!-- footer 1 -->

    <footer id="footer" style="background-color:#00CFA0;">
        

        <div class="container" style="padding:20px;">
                                  <div class="row">
                                    <div class="col-sm-6 col-xs-12">
                                    <div class="row">
                                      <table>
                                      <tr>
                                      <td style="text-align:center;">
                                        <img style="width: 150px; height: 125px; margin-left:20px;text-align: center;" src="assets/img/footerbranco.png" alt="Software médico para consultórios" title="Software médico para consultórios" id="footerLogo" class="mb-small">
                                        </div>
                                     </td>
                                     <td  class="d-none d-sm-block">
                                        <div style="text-align:left;color:#fff;margin-left:35px;">
                                        <p><strong>TISAÚDE TECNOLOGIAS INTELIGENTES LTDA</strong>
                                         <br>CNPJ. 24.932.304/0001-55</p>
                                         <p>Rua da Guia, 217
                                           <br>Recife Antigo, Recife, PE
                                           <br>CEP: 50030-210 </p>
                                           </div>
                                         </td> </tr> </table>

                                         </div>
                                       </div>
                                       <div class="hidden-xs col-sm-6 col-xs-12">
                                        <div class="footerInfo" style="text-align: center;color:#fff;">

                                        <br>
                                        <strong>
                                        Baixe agora o aplicativo 'Clínica Digital'
                                        </strong>
                                        <br>
                                        <br>
                                          <a  style="color:#fff;" href="https://itunes.apple.com/br/app/paciente-tisaude/id1227357722?l=en&mt=8" target="_blank" class="btn btn-translate--hover"> <i class="fab fa-apple "></i> 
                                            <span class="btn-inner--text ">Baixar na</span>
                                            <span class="btn-inner--brand ">App Store</span>
                                          </a>
                                          <a style="color:#fff;" href="https://play.google.com/store/apps/details?id=com.tisaude.pacientes&hl=pt_BR" target="_blank" class="btn btn-translate--hover">
                                            <i class="fab fa-google-play "></i>
                                            <span class="btn-inner--text ">Baixar no</span>
                                            <span class="btn-inner--brand ">Play Store</span>
                                          </a>

                                       </div>
                                     </div>

                                    </div>
                                  </div>
                                </div>





</footer>

<!-- footer 2 -->

    <footer id="footer" class="hidden-xs" style="background-color:#009976;height: 60px;color: #FFF;">







                                  <div class="container align-items-center">
                                    <div class="row">
                                      <div class="col-12 col-sm-9 " style="margin-top:20px;">
                                        <div class="copyRightText"> 
                                        <div class="row">
                                          <div class="col-xs-6" style="margin-left:20px;">
                                           Copyright © TISAÚDE 2018
                                            </div>
                                          <div class="col-xs-3 d-none d-sm-block" style="margin-left:40px;">
                                           <a href="https://www.tisaude.com/termosdeusopaciente" class="text-white">Termos de Uso</a> 
                                         </div>
                                          <div class="col-xs-3" style="margin-left:40px;">
                                           <a href="https://www.tisaude.com/contato" class="text-white">Fale conosco</a>
                                           </div>
                                         </div>
                                       </div>
                                     </div>
                                     
                                      <div class="col-sm-3 hidden-xs pull-right d-none d-sm-block" style="margin-top:20px;">
                                          <span style="margin-left: 20px;"><a href="https://www.facebook.com/tisaudebrasil" target="_blank" class="text-white"><i class="fab fa-facebook-f" aria-hidden="true" style="color: white;"></i></a></span>
                                          <span style="margin-left: 20px;"><a href="https://www.instagram.com/tisaudebrasil" target="_blank" class="text-white"><i class="fab fa-instagram" aria-hidden="true" style="color: white;"></i></a></span>
                                          <span style="margin-left: 20px;"><a href="https://www.twitter.com/tisaudebrasil" target="_blank" class="text-white"><i class="fab fa-twitter" aria-hidden="true" style="color: white;"></i></a></span>
                                          <span style="margin-left: 20px;"><a href="https://www.linkedin.com/tisaudebrasil" target="_blank" class="text-white"><i class="fab fa-linkedin" aria-hidden="true" style="color: white;"></i></a></span>
                                      </div>
                                   </div>
                               </div>


    </footer>

    <!-- footer 3 (que é o que ta ficando por cima do footer 2 e eu quero que ele fique embaixo dele quando chegar no final) -->

    <footer class="rodape" id="footer" style="background-color:#00CFA0;">
    <div class="container align-items-center">
       <h1>rodape</h1>
       </div>
    </footer>

Print de como tá no original já que aqui não funcionou por causa do bootstrap

1
  • Não entendi... você tem três <footer> todos com o id="footer" e quer que quando a rolagem chegar ao final o terceiro fique fixado? 23/08/2018 às 19:39

2 Respostas 2

1

Primeiro, não repita o valor atribuído id, abaixo segue um exemplo simples sobre o que você gostaria de fazer.

var rodapeFixed = false;
window.onscroll = function(ev) {
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {    
    if (!rodapeFixed) {
      var rodape = document.getElementById("footer_rodape");
      rodape.className = 'rodape';
      rodapeFixed = true;
    }
  }
};
.rodape {
  background-color: #00BFFF;
  text-align: center;
  font-size: 8pt;
  font-family: Verdana;
  font-weight: bold;
  width: 100%;
  position: fixed;
  bottom: 0px;
  left: 0px;
}
<!-- footer 1 -->
<div style="height:450px; display:block">
Conteudo
</div>
<footer id="footer" style="background-color:#00CFA0;">


  <div class="container" style="padding:20px;">
    <div class="row">
      <div class="col-sm-6 col-xs-12">
        <div class="row">
          <table>
            <tr>
              <td style="text-align:center;">
                <img style="width: 150px; height: 125px; margin-left:20px;text-align: center;" src="assets/img/footerbranco.png" alt="Software médico para consultórios" title="Software médico para consultórios" id="footerLogo" class="mb-small">

              </td>
              <td class="d-none d-sm-block">
                <div style="text-align:left;color:#fff;margin-left:35px;">
                  <p><strong>TISAÚDE TECNOLOGIAS INTELIGENTES LTDA</strong>
                    <br>CNPJ. 24.932.304/0001-55</p>
                  <p>Rua da Guia, 217
                    <br>Recife Antigo, Recife, PE
                    <br>CEP: 50030-210 </p>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="hidden-xs col-sm-6 col-xs-12">
      <div class="footerInfo" style="text-align: center;color:#fff;">

        <br>
        <strong>
                                        Baixe agora o aplicativo 'Clínica Digital'
                                        </strong>
        <br>
        <br>
        <a style="color:#fff;" href="https://itunes.apple.com/br/app/paciente-tisaude/id1227357722?l=en&mt=8" target="_blank" class="btn btn-translate--hover"> <i class="fab fa-apple "></i>
          <span class="btn-inner--text ">Baixar na</span>
          <span class="btn-inner--brand ">App Store</span>
        </a>
        <a style="color:#fff;" href="https://play.google.com/store/apps/details?id=com.tisaude.pacientes&hl=pt_BR" target="_blank" class="btn btn-translate--hover">
          <i class="fab fa-google-play "></i>
          <span class="btn-inner--text ">Baixar no</span>
          <span class="btn-inner--brand ">Play Store</span>
        </a>

      </div>
    </div>

  </div>
  </div>
  </div>





</footer>

<!-- footer 2 -->

<footer id="footer_2" class="hidden-xs" style="background-color:#009976;height: 60px;color: #FFF;">







  <div class="container align-items-center">
    <div class="row">
      <div class="col-12 col-sm-9 " style="margin-top:20px;">
        <div class="copyRightText">
          <div class="row">
            <div class="col-xs-6" style="margin-left:20px;">
              Copyright © TISAÚDE 2018
            </div>
            <div class="col-xs-3 d-none d-sm-block" style="margin-left:40px;">
              <a href="https://www.tisaude.com/termosdeusopaciente" class="text-white">Termos de Uso</a>
            </div>
            <div class="col-xs-3" style="margin-left:40px;">
              <a href="https://www.tisaude.com/contato" class="text-white">Fale conosco</a>
            </div>
          </div>
        </div>
      </div>

      <div class="col-sm-3 hidden-xs pull-right d-none d-sm-block" style="margin-top:20px;">
        <span style="margin-left: 20px;"><a href="https://www.facebook.com/tisaudebrasil" target="_blank" class="text-white"><i class="fab fa-facebook-f" aria-hidden="true" style="color: white;"></i></a></span>
        <span style="margin-left: 20px;"><a href="https://www.instagram.com/tisaudebrasil" target="_blank" class="text-white"><i class="fab fa-instagram" aria-hidden="true" style="color: white;"></i></a></span>
        <span style="margin-left: 20px;"><a href="https://www.twitter.com/tisaudebrasil" target="_blank" class="text-white"><i class="fab fa-twitter" aria-hidden="true" style="color: white;"></i></a></span>
        <span style="margin-left: 20px;"><a href="https://www.linkedin.com/tisaudebrasil" target="_blank" class="text-white"><i class="fab fa-linkedin" aria-hidden="true" style="color: white;"></i></a></span>
      </div>
    </div>
  </div>


</footer>

<!-- footer 3 (que é o que ta ficando por cima do footer 2 e eu quero que ele fique embaixo dele quando chegar no final) -->

<footer id="footer_rodape" style="background-color:#00CFA0;">
  <div class="container align-items-center">
    <h1>rodape</h1>
  </div>
</footer>

4
  • Realmente, não prestei atenção nisso! Muito obrigada pela ajuda :)
    – Anne
    23/08/2018 às 20:02
  • ficou alguma dúvida? 23/08/2018 às 20:05
  • ficou não, agradeço muito de verdade <3
    – Anne
    24/08/2018 às 10:52
  • @Anne É que aqui, se a pergunta foi respondida, você deve marcá-la como resposta. Isso ajuda com que outras pessoas que venham a ter o mesmo problema encontrei uma solução de forma mais fácil. 24/08/2018 às 12:16
1

Repetir id é incorreto. Um id deve ser único na página.

Sugiro que deixe o id #footer apenas no segundo footer. Seu código também possui algumas irregularidades — tem um fechamento de div no meio de uma td, por exemplo, além do que usar tabela nesses casos não é o recomendado. Precisa aprender a usar o sistema de grid do Bootstrap.

No caso, você pode conseguir o efeito aplicando transition nos últimos dois footers: o primeiro com uma margem inferior com a mesma altura do segundo, usando cada qual uma classe (coloquei .margem e .semmargem). Com o jQuery você retira as classes ao clicar em fechar o footer fixo, ocorrendo a animação. O penúltimo footer irá perder o margin-bottom e o último irá sair da tela com um bottom negativo com o mesmo valor do seu height.

Basicamente o efeito é feito usando CSS. O jQuery só é usado para criar um evento de clique no "X" para fechar o footer e remover/adicionar as classes mencionadas.

Criei um botão "X" simples com span para fechar o footer, mas você pode usar fontawesome para isso ou o que quiser, basta alterar o seletor no jQuery depois.

Exemplo:

$(document).ready(function(){
   
   $(".fecha").click(function(){
      $("#footer").removeClass("margem");
      $(".rodape").addClass("semmargem");
   });
   
});
body{
   margin: 0;
}
.rodape {
            background-color: #00BFFF;
            text-align: center;
            font-size:8pt;
            font-family: Verdana;
            font-weight:bold;
            width:100%;
            position:fixed;
            bottom:0px;
            left:0px;
   height: 60px;
   -webkit-transition: margin-bottom .5s ease;
   transition: margin-bottom .5s ease;
           
}

#footer{
   background-color:#009976;
   height: 60px !important;
   color: #FFF;
   margin-bottom: 0;
   -webkit-transition: margin-bottom .5s ease;
   transition: margin-bottom .5s ease;
}

#footer.margem{
   margin-bottom: 60px; /* mesma altura do .rodape */
}

.rodape.semmargem{
   margin-bottom: -60px; /* mesma altura negativa do .rodape */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

Role até o final
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>

<!-- footer 1 -->
<footer style="background-color:#00CFA0;">
   <div class="container" style="padding:20px;">
      <div class="row">
         <div class="col-sm-6 col-xs-12">
            <div class="row">
               <table>
                  <tr>
                     <td style="text-align:center;">
                        <img style="width: 150px; height: 125px; margin-left:20px;text-align: center;" src="assets/img/footerbranco.png" alt="Software médico para consultórios" title="Software médico para consultórios" id="footerLogo" class="mb-small">
            </div>
                     </td>
                     <td  class="d-none d-sm-block">
                        <div style="text-align:left;color:#fff;margin-left:35px;">
                           <p><strong>TISAÚDE TECNOLOGIAS INTELIGENTES LTDA</strong>
                           <br>CNPJ. 24.932.304/0001-55</p>
                           <p>Rua da Guia, 217
                           <br>Recife Antigo, Recife, PE
                           <br>CEP: 50030-210 </p>
                        </div>
               </td> </tr> </table>

            </div>
         </div>
            <div class="hidden-xs col-sm-6 col-xs-12">
               <div class="footerInfo" style="text-align: center;color:#fff;">

                  <br>
                  <strong>
                     Baixe agora o aplicativo 'Clínica Digital'
                  </strong>
                  <br>
                  <br>
                  <a  style="color:#fff;" href="https://itunes.apple.com/br/app/paciente-tisaude/id1227357722?l=en&mt=8" target="_blank" class="btn btn-translate--hover"> <i class="fab fa-apple "></i> 
                     <span class="btn-inner--text ">Baixar na</span>
                     <span class="btn-inner--brand ">App Store</span>
                  </a>
                  <a style="color:#fff;" href="https://play.google.com/store/apps/details?id=com.tisaude.pacientes&hl=pt_BR" target="_blank" class="btn btn-translate--hover">
                     <i class="fab fa-google-play "></i>
                     <span class="btn-inner--text ">Baixar no</span>
                     <span class="btn-inner--brand ">Play Store</span>
                  </a>

               </div>
            </div>

         </div>
      </div>
   </div>

</footer>

<!-- footer 2 -->

<footer id="footer" class="hidden-xs margem">
   <div class="container align-items-center">
      <div class="row">
         <div class="col-12 col-sm-9 " style="margin-top:20px;">
            <div class="copyRightText"> 
               <div class="row">
                  <div class="col-xs-6" style="margin-left:20px;">
                     Copyright © TISAÚDE 2018
                  </div>
                  <div class="col-xs-3 d-none d-sm-block" style="margin-left:40px;">
                     <a href="https://www.tisaude.com/termosdeusopaciente" class="text-white">Termos de Uso</a> 
                  </div>
                  <div class="col-xs-3" style="margin-left:40px;">
                     <a href="https://www.tisaude.com/contato" class="text-white">Fale conosco</a>
                  </div>
               </div>
            </div>
         </div>
         <div class="col-sm-3 hidden-xs pull-right d-none d-sm-block" style="margin-top:20px;">
            <span style="margin-left: 20px;"><a href="https://www.facebook.com/tisaudebrasil" target="_blank" class="text-white"><i class="fab fa-facebook-f" aria-hidden="true" style="color: white;"></i></a></span>
            <span style="margin-left: 20px;"><a href="https://www.instagram.com/tisaudebrasil" target="_blank" class="text-white"><i class="fab fa-instagram" aria-hidden="true" style="color: white;"></i></a></span>
            <span style="margin-left: 20px;"><a href="https://www.twitter.com/tisaudebrasil" target="_blank" class="text-white"><i class="fab fa-twitter" aria-hidden="true" style="color: white;"></i></a></span>
            <span style="margin-left: 20px;"><a href="https://www.linkedin.com/tisaudebrasil" target="_blank" class="text-white"><i class="fab fa-linkedin" aria-hidden="true" style="color: white;"></i></a></span>
         </div>
      </div>
   </div>

</footer>

<!-- footer 3 (que é o que ta ficando por cima do footer 2 e eu quero que ele fique embaixo dele quando chegar no final) -->

<footer class="rodape" style="background-color:#00CFA0;">
   <div class="container align-items-center">
      <span class="fecha" style="position: absolute; right: 10px; top: 10px; cursor: pointer;">X</span>
      <h1>rodape</h1>
   </div>
</footer>

1
  • Entendi. Obrigada pela explicação e pela ajuda, Sam! :3
    – Anne
    24/08/2018 às 10:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .