Scrolling div stop on top of footer

Question

I'm trying to do something similar like this http://jsfiddle.net/Kkv7X/

At the moment my script works fine, but when I scroll down the page and reach the footer section the scrolling div (.sticky-footer in my case) disappears from screen.

what I'd like to do instead is when I reach the footer section, the scrolling div should stay on top of my footer. How can I do this?

This is my code

 $(document).ready(function () { // sticky footer scroll effect $(document).scroll(function() { if($('.sticky-footer').offset().top + $('.sticky-footer').height() >= $('#footer').offset().top - 10) { $('.sticky-footer').css('position', 'absolute'); } if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top) { $('.sticky-footer').css('position', 'fixed'); // restore when you scroll up } }); }); 

CSS

 html { position: relative; min-height: 500px; } .sticky-footer { position: fixed; bottom: 0; background-color: rgba( 255, 255, 255, 0.5); text-align: center; width: 100%; height: 60px; padding: 15px 0; } 

HTML

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="sticky-footer"> <div class="container"> <div class="row"> <div class="col-md-12"> // code here ... </div> </div> </div> </div> <footer id="footer"> <div class="container"> <div class="row"> // code here ... </div> </div> </footer> 

Answer 1

Your problem is that your footer is above your other sticky footer. If you can keep it on the bottom of it all, it works:

 $(document).ready(function () { // sticky footer scroll effect $(document).scroll(function() { if($('.sticky-footer').offset().top + $('.sticky-footer').height() >= $('#footer').offset().top - 10) { $('.sticky-footer').css('position', 'absolute'); } if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top) { $('.sticky-footer').css('position', 'fixed'); // restore when you scroll up } }); }); 

 html { position: relative; min-height: 500px; } footer { position: absolute; bottom: -500px; height: 500px; } .sticky-footer { position: fixed; bottom: 0; background-color: rgba( 255, 255, 255, 0.5); text-align: center; width: 100%; height: 60px; padding: 15px 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="sticky-footer"> <div class="container"> <div class="row"> <div class="col-md-12"> // code here ... </div> </div> </div> </div> <footer id="footer"> <div class="container"> <div class="row"> // code here ... </div> </div> </footer> 

Answer 2

They ( http://uk.marketo.com/software/ ) just change the styles of the sticky buttons when the scroll reaches the footer. So you just need to listen when the scrollbar reaches the footer and change your sticky element in response.

To listen the scrollbar I recommend using https://github.com/imakewebthings/waypoints , i think is one of the easier libraries for deal with scroll animations, listeners etc.

The styles to apply to your sticky element should change a

.sticky{
  position  : fixed;
  bottom : 0;
}

to:

.sticky.reached{
   position : absolute;
   bottom : 400px; //or whatever.

.sticky is the class of the sticky element (or elements, or wrapper etc.) and .reached is the class you add to that when the footer is reached by the scrollbar. You almost must de-tach when the scrollbar goes up again. IE (using waypoints):

$("footer").waypoint(function(direction){
    if(direction == 'down')
       $('.sticky').addClass('reached');
    else
       $('.sticky.reached').removeClass('reached');   

});