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

Question

我正在构建一个网站，需要一个始终 float 在浏览器窗口底部的页脚。

但是，只有当用户向下滚动 200 像素时才会出现。然后它应该滚动到位(就好像页脚附加到 View 外 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();
      }
});