4

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

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

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

此外，我希望 HTML 标记和 CSS 保持原样（因为它是如何使用其所有内容构建页面的，我希望在其中包含此脚本）。

非常感谢您提前。

4

2 回答 2

8

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

于 2012-08-01T09:57:18.240 回答
1

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

我已经制作了你的#wrapper和#footer_border380px，所以你可以从 jsfiddle 框架中轻松地检查它。将自动边距放置在您的#footer_border上，以确保它居中，尽管是position:fixed，然后删除left:0。在此处检查更新的 jsfiddle：

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

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

于 2013-04-19T08:24:51.447 回答