Footer slide up when user scrolls page to bottom

Question

I have a footer fixed on the bottom of my webpage but I don't want it to be visible until the user reaches the bottom of the page, then I want it to slide up.

The footer is 200px height and fixed to the bottom and the body has a 200px padding a the bottom.

CSS:

footer {
    min-height: 200px;
    background-color: #bdf207;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
 }

body {
    padding-bottom: 200px;
}

The jQuery I'm using is as follows but it is not working:

$(window).scroll(function() {
    // when user starts scrolling trigger function
    var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
    // if the bottom of the page reaches 250px remaining of the document
    if (scrollBottom > 250){
        // slide the footer up
        $('footer').slideUp('slow');
    }
});

Answer 1

.footer {

  position: absolute;

  right: 0;

  bottom: 0;

  left: 0;

  padding: 1rem;

  background-color: #efefef;

  text-align: center;

}

Then use jQuery to slide up

You can refer below link for help

http://jsfiddle.net/nathanbweb/zMsYq/`

jQuery(function($) {

        var slide = false;

        var height = $('#footer_content').height();

        $('#footer_button').click(function() {

            var docHeight = $(document).height();

            var windowHeight = $(window).height();

            var scrollPos = docHeight - windowHeight + height;

            $('#footer_content').animate({ height: "toggle"}, 1000);

            if(slide == false) {

                if($.browser.opera) {

                    $('html').animate({scrollTop: scrollPos+'px'}, 1000);

                } else {

                    $('html, body').animate({scrollTop: scrollPos+'px'}, 1000);
                }

                slide = true;
            } else {
                slide = false;
            }
        });
    });

Answer 2

I would approach it a little differently. I would take advantage of the absolute positioning and just hide it below the document until you scroll to the appropriate position.

$(window).scroll(function() {
  var scrollBottom =
      $(document).height() - $(window).height() - $(window).scrollTop(),
      currentPos = parseInt($('footer').css('bottom'));

  if(currentPos === -200 || currentPos === 0)
    if (scrollBottom < 250){
      $('footer').stop().animate({bottom: 0});
    } else {
      $('footer').stop().animate({bottom: -200});
    }
});

footer {
    min-height: 200px;
    background-color: #bdf207;
    position: fixed;
    left: 0;
    right: 0;
    bottom: -200px;
}

body {
    padding-bottom: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
<footer>Footer</footer>

Answer 3

The slideUp() function hides the element by reducing its height to 0 or whatever the min-height is set to and then setting display: none;.

Calling it on an element that is 200px in height with a min-height of 200px will do nothing to the element height-wise and then set display: none;