Question

我的页面底部有一个页脚元素，可以通过单击两个箭头删除/返回。当我重新调整浏览器窗口大小时，会出现问题，页脚并不总是粘在页面底部，并且可能会结束页面，不可访问或页面中间。我在这里拼凑了一个小提琴，但javascript似乎并没有起作用......

http://jsfiddle.net/Za7Lq/

JS：

$(document).ready(function(){
  $("#darrow").click(function(){
    $("#footer").animate({"top": "+=100px"}, "slow");
    $("#uarrow").animate({"top": "-=50px"}, "slow");
    $("#darrow").animate({"top": "+=100px"}, "slow");
  });
});

$(document).ready(function(){
  $("#uarrow").click(function(){
    $("#footer").animate({"top": "-=100px"}, "slow");
    $("#uarrow").animate({"top": "+=50px"}, "slow");
    $("#darrow").animate({"top": "-=100px"}, "slow");
  });
});

Answer 1

见下面的编辑。你可能不需要我的alt版本。

因此，我不是将您的页脚设置为显示/隐藏页脚的动画，而是将页脚放在包装器内，并为该包装器设置高度值的动画。有点像这样：

HTML：

<div class="footer-wrapper">
  <div class="footer">
    <p>Stuff in here</p>
  </div>
</div>

CSS：

.footer-wrapper {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
}

.footer {
  height: 100px;
  width: 100%;
}

JS：

$("#darrow").click(function(){
  $("#footer-wrapper").animate({"height": "+=100px"}, "slow");
});

然后，您可以根据负顶部值（如果您希望它们位于页脚上方）绝对地将您的箭头从页脚包装容器中移开，并且它们将跟随容器的高度进行跟踪。

这应该坚持到任何浏览器的底部（虽然没有旧IE的承诺）。

编辑：

在看到你的工作小提琴之后，我认为问题在于你是使用'bottom'设置页脚的起始位置，但是你试图使用'top'来移动它。如果您想坚持使用解决方案，请改为为底部值设置动画，并反转+/-运算符。

Answer 2

我不确定，但是如果你想将它放在文档底部或窗口底部。

窗口底部

使用绝对定位，但可能会被你认为是你的问题的其他元素搞砸了

窗口底部

.class {
position:fixed;
bottom: 0px;
}

如果它们都不起作用

使用javascript查找页面底部，然后按页脚高度减去页面底部，并使用javascript进行定位。

调整大小后，我的页脚不会保留在浏览器窗口的底部

2 个答案: