Fix footer when user scrolls to widget

Asked

Viewed 77 times

3

I’m making a Landing page that has a footer between sections, and when the user scrolls to that footer it should stay fixed at the bottom.

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

Has how to change this plugin or simpler way to do?

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
  • 1

    Footer’s place is in the middle ? Then when the user gets to Footer, he should go there in the Bottom ?

  • 1

    Here’s an example I did: http://jsfiddle.net/ckvda5L3/ ... it has to do with this or I got it wrong ?

  • 1

    it should be fixed at the bottom only when it appears to the user, during the @Deesouza scroll

  • 1

    Haaa. I get it... I’ll see if I can simulate.

  • 1

    And when it rises it has to return in the place ?

  • 1

    Yes, back to place with relative position

Show 1 more comment

1 answer

2


$(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');
        }
    }
});

Browser other questions tagged javascript jquery html5

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