在页脚处停止固定位置

小编典典

在页脚处停止固定位置

css

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

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

我在这里以及其他地方都看过其他问题。但是我无法使其适合我的情况。

这是共享框的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解决方案，我将不胜感激！

阅读 283

2020-05-16

共1个答案

小编典典

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

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

如果在页脚之前将其放下10像素以下，则将其位置设为绝对位置。

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>

祝好运：）

2020-05-16