html - div with position-fixed (to bottom) - 击中页脚时停止

Question

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

这是我已经非常完整的例子，它完全按照我想要的方式工作:http://jsfiddle.net/enULV/ (为什么它不能在真实页面上运行？)。- 我的猜测是 JavaScript 有问题，但我的 JS 很差，如果能提供一些帮助，我将不胜感激。

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

此外，我希望 HTML 标记和 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>