停止页脚的固定位置

问题描述

我正在寻找解决在页面页脚停止固定对象的常见问题。

I'm looking for a solution to the popular issue of stopping a fixed object at the footer of the page.

我基本上有一个固定的共享框在屏幕的左下角，我不希望它滚动页脚，所以我需要它停止在页脚上方 10px 。

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.

这是分享框的html：

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>

...和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;
}

页脚是 #footer

The footer is #footer and it doesn't have a fixed height, if that makes any difference.

如果有人可以帮助我为这个创建一个简单的jQuery解决方案，我会非常感谢！

If someone could assist me in creating a simple jQuery solution for this, I'd much appreciate it!

推荐答案

首先，每次滚动页面时检查其偏移

first, check its offset every time you scroll the page

$(document).scroll(function() {
    checkOffset();
});

并将其位置设置为绝对位置。 b
$ b

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
}

注意 social-float 的父级应该是页脚的同级

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：）

good luck :)

这篇关于停止页脚的固定位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！