Question

I’m building a site which requires a Footer which will float at the bottom of the browser window at all times.

However, this should only appear once the user has scrolled down 200px. It should then scroll in place (as if the footer is attached to the content 200px out of view, but attaches itself to the browser window).

As soon as the user scrolls back up, this needs to then be hidden again.

How can this be done?

Answer 1

Maybe this piece of code can help you out:

$(window).scroll(function() {
    if ($(this).scrollTop() < 200) {
        $("#footer").hide();
    }
    else {
        $("#footer").show();
    }
});

and for the CSS add

#footer {
    position:fixed;
    left:0px;
    bottom:0px;
    height:100px;
    width:100%;
    display:none;
}

Something like this:

$(window).scroll(function() {
  if ($(this).scrollTop() < 200) {
    $("footer").slideUp();
      }
  else {
    $("footer").slideDown();
      }
});