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

概述我已经在使用我在另一篇文章中找到的解决方案解决我的问题方面已经取得了很大进展： https://stackoverflow.com/a/8653109/1567848 – 但我仍然无法在真实页面上使其工作.它只能在JSFiddle中工作. 这是我已经非常完整的示例,它完全按照我想要的方式工作：http://jsfiddle.net/enULV/(为什么它不能在真实页面上工作？). – 我的猜测是J 我已经在使用我在另一篇文章中找到的解决方案解决我的问题方面已经取得了很大进展： https://stackoverflow.com/a/8653109/1567848 – 但我仍然无法在真实页面上使其工作.它只能在Jsfiddle中工作.

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

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

此外,我希望HTML-Markup和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 >long content sample</div><div ID="social-float">  <div >twitter</div>  <div >facebook</div>  <div >plusone</div></div><div ID="footer">footer sample</div>

总结

以上是内存溢出为你收集整理的html – 位置固定的div(底部) – 击中页脚时停止全部内容，希望文章能够帮你解决html – 位置固定的div(底部) – 击中页脚时停止所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。