浮动页脚仅在用户向下滚动 200 像素后出现

Question

我正在构建一个需要页脚的站点，该页脚将始终浮动在浏览器 window 的底部。

但是，这只会在用户向下滚动 200 像素后出现。 然后它应该就地滚动（就好像页脚附加到 200 像素外的内容，但自身附加到浏览器窗口）。

一旦用户向上滚动，就需要再次隐藏它。

如何才能做到这一点？

Answer 1

也许这段代码可以帮助你：

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

对于 CSS 添加

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

像这样的东西：

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

Answer 2

我认为http://jsfiddle.net/KEjfe/4/是你想要的，从我在你的问题中收集到的。

但

我想让你知道小提琴是一个粗略的例子，我不得不一起破解，因为它在小提琴中。 但想法就在那里，那就是你制作 2 个相同的页脚。 一个在固定的 position 中（在小提琴中它是绝对的），一个在绝对的 position 中（在小提琴中它是相对的）。 然后你可以在我的小提琴中使用相同类型的if语句，一旦你从顶部滚动超过 200px，删除绝对定位并显示固定，反之亦然，当你低于 200px 时。

所以请记住：

• 固定位置的 div（即粘性页脚）
• 绝对定位的 div（即流动的页脚）

Answer 3

看起来你需要固定的页脚。