Floating footer to only appear once user has scrolled down 200px

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

Answer 2

I think http://jsfiddle.net/KEjfe/4/ is what you want, from what I gather in your question.

BUT

I want to you to know that the fiddle is a crude example and I had to hack to together because it was in fiddle. But the idea is there, which is that you make 2 of the same footers. One that is in a fixed position (in the fiddle it's absolute), and one that is in a absolute position (in the fiddle it's relative). Then you can have the same type of if statement in my fiddle, once you scroll past 200px from the top, remove the absolute positioned and show the fixed, and vice versa when you are below 200px.

So remember:

• A div that is fixed positioned (which is the sticky footer)
• A div that is absolute positioned (which is the flowing footer)

Answer 3

Looks like you need fixed footer .