Question

我已经在使用我在另一篇文章中找到的解决方案解决我的问题方面取得了很大进展：https://stackoverflow.com/a/8653109/1567848 - 但仍然无法使其在真实页面上运行。它只能在JSFiddle中工作。

这是我已经非常完整的示例，它完全按照我想要的方式工作：http://jsfiddle.net/enULV/（为什么它不能在真实页面上工作？）。 - 我的猜测是JavaScript存在问题，但我的JS很差，我会非常感谢你的帮助。

也许另一种解决方案可能是从底部确定一定数量的像素，为#footer_border创建一个不与#footer重叠的限制。（只是另一个随意的想法 - 我实际上更愿意让其他方法起作用。）

此外，我希望HTML-Markup和CSS保持原样（对于它如何构建页面的所有内容，我希望在其中包含此脚本）。

非常感谢你。

Answer 1

也许这可能是一个更好的样本。 HTML和CSS代码基于您的原始问题。长内容示例包含在DIV中，只是为了给出比浏览器窗口高度更长的内容。您可以使用纯文本或任何内容替换整个DIV容器。

function checkOffset() {
  var a=$(document).scrollTop()+window.innerHeight;
  var b=$('#footer').offset().top;
  if (a<b) {
    $('#social-float').css('bottom', '10px');
  } else {
    $('#social-float').css('bottom', (10+(a-b))+'px');
  }
}
$(document).ready(checkOffset);
$(document).scroll(checkOffset);

#social-float {
  position: fixed;
  bottom: 10px;
  left: 10px;
  width: 55px;
  padding: 10px 5px;
  text-align: center;
  background-color: #fff;
  border: 5px solid #ccd0d5;
  border-radius: 2px;
}
#footer { height: 5em; background: #888; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<div style="height:1000px">long content sample</div>
<div id="social-float">
  <div class="sf-twitter">twitter</div>
  <div class="sf-facebook">facebook</div>
  <div class="sf-plusone">plusone</div>
</div>
<div id="footer">footer sample</div>

Answer 2

脚本没有问题。这只是#footer_border position:absolute或position:fixed的问题。固定使其相对于浏览器窗口定位，而绝对使其相对于第一个定位（非静态）祖先元素（在您的情况下，#wrapper）。

我已经制作了#wrapper和#footer_border 380px，因此您可以在jsfiddle框架内轻松检查它。在#footer_border上放置自动边距，以确保其position:fixed居中，然后移除left:0。在这里查看更新的jsfiddle：

http://jsfiddle.net/enULV/23/

我知道这个问题现在已经快一年了，但我希望这仍然有用。

位置固定的div（底部） - 击中页脚时停止

2 个答案: