javascript - 在页脚停止固定位置

Question

我正在寻找一种解决方案，以解决在页面页脚处停止固定对象这一常见问题。

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

我已经看过这里的其他问题以及其他问题。我能找到的最接近/最简单的演示是 http://jsfiddle.net/bryanjamesross/VtPcm/但我无法让它适应我的情况。

这是分享框的 html:

    <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，它没有固定的高度，如果这有什么不同的话。

如果有人可以帮助我为此创建一个简单的 jQuery 解决方案，我将不胜感激!

Answer 1

Live demo

首先，每次滚动页面时检查它的偏移量

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

如果它在页脚前 10px 以下，则将其定位为绝对位置。

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 的父级应该是页脚的兄弟

<div class="social-float-parent">
    <div id="social-float">
        something...
    </div>
</div>
<div id="footer">
</div>

祝你好运:)