固定底部位置的 div - 在触及页脚时停止

Question

我已经通过在另一篇文章中找到的解决方案相当进步，解决了我的问题：https://dev59.com/pmoy5IYBdhLWcg3wScFB#8653109，但是仍然无法在实际页面上使其工作。它只能在JSFiddle中工作。

这是我的一个非常完整的例子，它的工作方式与我想要的完全相同：http://jsfiddle.net/enULV/ （为什么它不能在实际页面上工作？）。 - 我猜测可能是JavaScript出了问题，但我的JS很差，我将非常感谢一些帮助。

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

此外，我希望HTML标记和CSS保持原样（因为它是页面构造的所有内容，我希望包括此脚本）。

非常感谢您提前的帮助。

- user1567848

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>

- Jay

---

完美，这个解决方案解决了我的问题。谢谢。 - gvillavizar

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/

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

- Elly