make div stay below the footer

Asked

Viewed 133 times

1

Hello, I would like to know how to make a div follow the scroll bar of the screen and when you arrive at the end of the screen it is positioned below the footer and when you press the close button, it disappears and the footer is positioned right as well as this link: https://gestao.vitta.me/

I tried anyway and I couldn’t.

I’ll send you my code for now.

<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

javascript html css

  • I don’t understand... you have three <footer> all with the id="footer" and wants when the roll reaches the end the third is fixed?

2 answers

1


First, do not repeat the value assigned id, below follows a simple example on what you would like to do.

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>

  • Really, I didn’t pay attention to it! Thank you so much for your help :)

  • there was some doubt?

  • stayed no, I really appreciate <3

  • @It is that here, if the question has been answered, you should mark it as an answer. This helps other people who will have the same problem find an easier solution.

1

Repeat id is incorrect. A id should be unique on the page.

I suggest you leave the id #footer only on the second footer. Your code also has some irregularities - it has a div in the middle of a td, for example, besides what to use table in these cases is not recommended. You need to learn how to use the Bootstrap grid system.

In case, you can achieve the effect by applying transition in the last two footers: the first with a lower margin with the same height as the second, using each one a class (put .margem and .semmargem). With jQuery you remove the classes by clicking close the fixed footer, and the animation occurs. The penultimate footer will lose the margin-bottom and the latter will exit the screen with a bottom negative with the same value as its height.

Basically the effect is done using CSS. jQuery is only used to create an "X" click event to close the footer and remove/add the mentioned classes.

I created a simple "X" button with span to close the footer, but you can use fontawesome for that or whatever, just change the selector in jQuery afterwards.

Example:

$(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>

  • Got it. Thanks for the explanation and the help, Sam! 3

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.