Question

我正在构建一个需要页脚的网站，它会一直漂浮在浏览器窗口的底部。

但是，只有在用户向下滚动200px后才能显示。然后它应该在适当的位置滚动（就好像页脚附加到视图中的内容200px，但将其自身附加到浏览器窗口）。

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

如何做到这一点？

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/就是你想要的，从我在你的问题中收集到的。

但是

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

请记住：

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

Answer 3

您似乎需要fixed footer。

浮动页脚仅在用户向下滚动200px时才会显示

3 个答案: