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

Question

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

这是我已经非常完整的示例,它的工作方式与我想要的完全一样:http://jsfiddle.net/enULV/(为什么它不能在真实的页面上工作？). - 我的猜测是JavaScript存在问题,但我的JS很差,我会非常感谢一些帮助.

也许另一种解决方案可能是从底部确定一定数量的像素,从而为#footer_border不重叠的像素创造限制#footer.(只是另一个随意的想法 - 我实际上更喜欢让其他方法工作.)

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

非常感谢你提前.

Answer 1

也许这可能是一个更好的样本.HTML和CSS代码基于您的原始问题.长内容示例包含在一个DIVjust中,以给出比浏览器窗口高度更长的内容.您可以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>