Fade in/out fixed position div when user scrolls to very bottom of page

Question

This seems pretty elementary, but I am trying to get a fixed-position footer div to slide & fade in when a user scrolls to the very bottom of a webpage and then slide & fade out when the user scrolls back up. I have searched Stack Overflow and others have suggested solutions, but my code causes my div to only to slide & fade in. I can't get the div to slide & fade out when the user scrolls back up.

Also, this div slides & fades in right after I begin scrolling. I need it to wait until it gets to the bottom of the page (or an invisible div that I could place at the bottom of the page) before my fixed position div slides & fades in.

Any suggestions?

jQuery:

$(function() {
    $('#footer').css({opacity: 0, bottom: '-100px'});
    $(window).scroll(function() {
        if( $(window).scrollTop + $(window).height() > $(document).height() ) {
            $('#footer').animate({opacity: 1, bottom: '0px'});
        }
    });
});

HTML:

<div id="footer">
    <!-- footer content here -->
</div>

CSS:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100px;
    z-index: 26;
}

Thanks for helping!

Solution

I think I would try doing it something like this.

http://jsfiddle.net/lollero/SFPpf/3

http://jsfiddle.net/lollero/SFPpf/4 - Little more advanced version.

JS:

var footer = $('#footer'),
    extra = 10; // In case you want to trigger it a bit sooner than exactly at the bottom.

footer.css({ opacity: '0', display: 'block' });

$(window).scroll(function() {

   var scrolledLength = ( $(window).height() + extra ) + $(window).scrollTop(),
       documentHeight = $(document).height();


    console.log( 'Scroll length: ' + scrolledLength + ' Document height: ' + documentHeight )


   if( scrolledLength >= documentHeight ) {

       footer
          .addClass('bottom')
          .stop().animate({ bottom: '0', opacity: '1' }, 300);

   }
   else if ( scrolledLength <= documentHeight && footer.hasClass('bottom') ) {           
        footer
           .removeClass('bottom')
           .stop().animate({ bottom: '-100', opacity: '0' }, 300);

   }
});

HTML:

<div id="footer">
    <p>Lorem ipsum dolor sit amet</p>
</div> 

CSS:

#footer {
    display: none;
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: -100px;
    height: 100px;
    width: 100%;
    background: #222;
    color: #fff;
    text-align: center;
}

#footer p {
    padding: 10px;
}

Comments

[kaffolder]

Thanks so much for your help! Your solution definitely works, however, is there a way to also make this fixed position div slide in and out of view along with fading in?

[Joonas]

@kaffolder Sure. jsfiddle.net/lollero/SFPpf/3 - Btw, added a console.log() to show current scroll length and the document length (updates as you scroll). It's just for testing.

[kaffolder]

WOW!! Thank you, thank you, thank you @Joonas! So very helpful! It works perfectly. Did have another quick question regarding this solution. Say I have an unordered list of 3 <li> elements contained within this footer. Is it possible to animate them each individually, or not because we are calling the $('#footer') only? Right now, they all appear & slide in at the same time. Same thing when they slide out/fade out. I would almost like to create more of a 'popcorn' effect where each <li> comes in at different times & goes out at different times. Is this hard to do?

[Joonas]

@kaffolder Simplest way would be to target each of those elements separately and manually give them different values, but here's something that might be useful jsfiddle.net/lollero/SFPpf/4

[kaffolder]

Thanks sooo much! This is just perfect. I've tweaked it to work with my unordered menu list as I had hoped was possible. Might try and mess around with what you wrote to get the boxes to enter in a little sooner...not sure why there's a slight delay between when the footer slides in and when the div boxes slide in, but I'm hoping to minimize the delay between the two somehow. Thanks again for the awesome solution and for helping me out!

[Joonas]

@kaffolder The biggest reason for that delay is that I had put the grey boxes animation inside the footer animations callback, this means that the grey boxes animation will always trigger after the footer animation is complete. Simply moving the grey boxes animation out of the footer animations callback will do the trick jsfiddle.net/SFPpf/6 I also added a static delay to the footer, that seemed to make the footer and the boxes come out more constantly at about the same time.

[kaffolder]

Wow, can't believe that I overlooked the fact that it was in the callback. Thanks a TON! Very helpful and kept me from pulling my hair out!! You rock!

[KVDD]

This is awesome @Joonas !!! Is there a way to make the little boxes look like they are coming from behind the footer? rather than in front of? I'm trying to place the boxes on top of the footer, but make it seem like they popped up from behind.