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

html, jquery, jquery-animate, scroll

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;
}

Problem

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!

Original source