在页脚停止固定位置
[英] Stop fixed position at footer
本文介绍了在页脚停止固定位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在寻找解决在页面页脚停止固定对象这一流行问题的解决方案.
我基本上在屏幕的左下角有一个固定的共享"框，我不希望它在页脚上滚动，所以我需要它在屏幕上方 10px 处停止页脚.
我在这里和其他人都看过其他问题.我能找到的最接近/最简单的演示是 http://jsfiddle.net/bryanjamesross/VtPcm/ 但我不能让它适应我的情况.
这是共享框的 html:
<div class="sf-twitter">...
<div class="sf-facebook">...
<div class="sf-plusone">...
...和 CSS:
#social-float{位置:固定；底部:10px；左:10px；宽度:55px；填充:10px 5px；文本对齐:居中；背景色:#fff;边框:5px 实心 #ccd0d5;-webkit-border-radius: 2px;-moz-border-radius: 2px;边界半径:2px；显示:无；}
页脚是 #footer 并且它没有固定的高度，如果这有什么不同的话.
如果有人能帮助我为此创建一个简单的 jQuery 解决方案，我将不胜感激！
解决方案
Live demo
首先，每次滚动页面时检查其偏移量
$(document).scroll(function() {checkOffset();});
如果它在页脚前 10 像素以下，则将其位置设为绝对位置.
function checkOffset() {if($('#social-float').offset().top + $('#social-float').height()>= $('#footer').offset().top - 10)$('#social-float').css('位置', '绝对');if($(document).scrollTop() + window.innerHeight <$('#footer').offset().top)$('#social-float').css('位置', '固定');//向上滚动时恢复}
注意#social-float 的父级应该是页脚的兄弟
<div id="social-float">某物...
<div id="页脚">
祝你好运:)
I'm looking for a solution to the popular issue of stopping a fixed object at the footer of the page.
I basically have a fixed "share" box in the bottom left corner of the screen and I don't want it to scroll over the footer, so I need it to stop about 10px above the footer.
I've looked at other questions here as well as others. The closest/most simple demo I could find is http://jsfiddle.net/bryanjamesross/VtPcm/ but I couldn't get it to work with my situation.
Here's the html for the share box:
<div id="social-float">
<div class="sf-twitter">
...
</div>
<div class="sf-facebook">
...
</div>
<div class="sf-plusone">
...
</div>
</div>
...and the CSS:
#social-float{
position: fixed;
bottom: 10px;
left: 10px;
width: 55px;
padding: 10px 5px;
text-align: center;
background-color: #fff;
border: 5px solid #ccd0d5;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
display: none;
}
The footer is #footer and it doesn't have a fixed height, if that makes any difference.
If someone could assist me in creating a simple jQuery solution for this, I'd much appreciate it!
解决方案
Live demo
first, check its offset every time you scroll the page
$(document).scroll(function() {
checkOffset();
});
and make its position absolute if it has been downed under 10px before the footer.
function checkOffset() {
if($('#social-float').offset().top + $('#social-float').height()
>= $('#footer').offset().top - 10)
$('#social-float').css('position', 'absolute');
if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
$('#social-float').css('position', 'fixed'); // restore when you scroll up
}
notice that #social-float's parent should be sibling of the footer
<div class="social-float-parent">
<div id="social-float">
something...
</div>
</div>
<div id="footer">
</div>
good luck :)
这篇关于在页脚停止固定位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
