javascript - Floating footer to only appear once user has scrolled down 200px - Stack Overflow

admin管理员组

文章数量:1295914

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?

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?

• javascript
• jquery
• css
• scroll
• sticky-footer

Share Improve this question Follow edited Jul 19, 2011 at 9:14 Curtis asked Jul 19, 2011 at 9:05 CurtisCurtis 103k6868 gold badges277277 silver badges357357 bronze badges 8

• Doesn't the tutorial you linked to show how to achieve this? – Mathieu Rodic Commented Jul 19, 2011 at 9:12
• sorry for the dumb ment maybe I don't understand well but are you sure it doesn't do what you need already? See here: cssstickyfooter./using-sticky-footer-code.html In presence of a long page content It seems to do what you need. Am I wrong? – microspino Commented Jul 19, 2011 at 9:12
• Sorry, I don't think I've explained myself well. It needs to float on top of the content, so its always fixed to the bottom of the browser window – Curtis Commented Jul 19, 2011 at 9:13
• Edited content, I hope this explains a bit better – Curtis Commented Jul 19, 2011 at 9:14
• ...I mean just use/resize that long page to see a CSS footer behavior similar to what you seems to need. – microspino Commented Jul 19, 2011 at 9:14

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 7

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

I think http://jsfiddle/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)

Looks like you need fixed footer.

本文标签： javascriptFloating footer to only appear once user has scrolled down 200pxStack Overflow