我已经在用另一篇文章中找到的解决方案来解决我的问题方面取得了很大进展:https://stackoverflow.com/a/8653109/1567848-但仍然无法在真正的页面上运行。它只能在jsfiddle中工作。
这是我已经非常完整的例子,它的工作方式正是我想要的:http://jsfiddle.net/enULV/(为什么它不能在真正的页面上工作?)是的。
-我的猜测是javascript有问题,但是我的js很差,我非常感谢您的帮助。
或许另一种解决方案是从底部确定一定数量的像素,从而为#footer_border创建一个限制,使其不与#footer重叠。(只是另一个随机的想法-我实际上更愿意让另一种方法工作。)
此外,我希望html标记和css保持原样(因为它是如何构建页面及其所有内容的,我希望在其中包含此脚本)。
提前非常感谢。

最佳答案

也许这是一个更好的样本。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>

09-10 09:09
查看更多