Fix footer when user scrolls to element

Question

Fix footer when user scrolls to element

Navigation

#1 by (2 votes)

3

I'm doing a landing page that has a footer between sections, and when the user scrolls to that footer it should be fixed at the bottom.

I tried to use scrollToFixed but it behaves like a header, fixed to the top.

Can you change this plugin or simpler way to do it?

ul{
  border-bottom: 1px solid #ccc;
}


ul li{
  display: inline-block;
  padding: 10px
 }

section{
  background: #ccc;
  padding: 20px 10px; 
} 

.footer-contato{
  background: #f1f1f1;
}

<header>
  <nav>
    <ul>
      <li>home</li>
      <li>informações</li>
      <li>localização</li>
      <li>patrocinadores</li>
    </ul>
   </nav>
</header>
<section class="home">
    <h1>Home</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="informacoes">
    <h1>Informações</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="footer-contato">
  <h1> Footer fixed </h1>
</section>
<section class="local">
    <h1>Local</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="patrocinadores">
    <h1>Patrocinadores</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>

javascript jquery html5

asked by anonymous 05.10.2015 / 15:27

1 answer

Increase the reliability of random numbers Connection with PDO does not give error, nor with dummy bank

score 2 · Accepted Answer

$(window).scroll(function () {

    if ($(window).width() > 992) {
        var altura = $('#video').offset().top;
        if ($(this).scrollTop() > altura) {
            $(".footer-contato").addClass('fixar');
        } else {
            $(".footer-contato").removeClass('fixar');
        }
    }
});