在页脚停止固定位置

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 解决方案，我将不胜感激！

原文由 scferg5 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

现场演示

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

$(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>

祝你好运 ：）

原文由 Sang 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我刚刚在我正在处理的网站上解决了这个问题，我想我会分享它，希望它能帮助别人。

我的解决方案采用从页脚到页面顶部的距离 - 如果用户滚动的距离超过此距离，它会将侧边栏拉回负边距。

 $(window).scroll(() => {
  // Distance from top of document to top of footer.
  topOfFooter = $('#footer').position().top;
  // Distance user has scrolled from top, adjusted to take in height of sidebar (570 pixels inc. padding).
  scrollDistanceFromTopOfDoc = $(document).scrollTop() + 570;
  // Difference between the two.
  scrollDistanceFromTopOfFooter = scrollDistanceFromTopOfDoc - topOfFooter;

  // If user has scrolled further than footer,
  // pull sidebar up using a negative margin.
  if (scrollDistanceFromTopOfDoc > topOfFooter) {
    $('#cart').css('margin-top',  0 - scrollDistanceFromTopOfFooter);
  } else  {
    $('#cart').css('margin-top', 0);
  }
});

原文由 user1097431 发布，翻译遵循 CC BY-SA 4.0 许可协议