make div stay below footer

Question

make div stay below footer

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

Hello, I would like to know how to make a div follow the scroll bar of the screen and when it reaches the end of the screen it is positioned below the footer and when you hit the close button, it disappears and the footer is positioned right like this link: link

I tried it anyway and could not.

I'll send 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>

javascript html css

asked by anonymous 23.08.2018 / 21:23

2 answers

1

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

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

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

Basically the effect is done using CSS. JQuery is only used to create a click event on the "X" 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 this or whatever you want, just change the selector in jQuery later.

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><scriptsrc="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>

23.08.2018 / 22:23

User with more than one profile Is there any command to list all foreign keys in a MYSQL table?

score 1 · Accepted Answer

First, do not repeat the value id , here's a simple example of what you'd 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>