jquery - 页脚上方的 float 社交图标

Question

当涉及到网页的固定 div 元素时，我需要一些关于如何最好地解决问题的指导。

问题: 全宽水平固定社交图标在移动屏幕底部可见，并在用户滚动页面时随您移动。当用户滚动并到达网页末尾时，社交图标会与页脚区域重叠。

期望的目标: 期望的结果是在网页底部显示全宽水平固定社交图标，但是，希望图标停止在页脚之前而不与页脚重叠。

例子:

我应该如何处理这似乎是一个普遍问题？谢谢 :)

Answer 1

如果您将 padding-bottom 添加到等于固定元素高度的页脚，则页脚将滚动到固定 div 上方的 View 中。这与 OP 提出的顺序相反，但却是最简单的解决方案:

#container {
  height: 1000px;
  width: 100px;
  background: silver;
  position: relative;
}
#footer {
  height: 50px;
  width: 100%;
  padding-bottom: 50px;
  background: black;
  position: absolute;
  bottom: 0;
}
#fixed {
  height: 50px;
  width: 100px;
  position: fixed;
  bottom: 0;
  background: blue;
}

<div id="container">
  <div id="footer"></div>
</div>
<div id="fixed"></div>