css - 如何在父元素末尾停止粘性元素

Question

我有一个包含内容栏和粘性侧边栏的布局。向下滚动页面时，我需要在内容栏末尾停止侧边栏。

这里是我使用的 HTML 和 CSS:

<div class="container">
  <div class="content">Content</div>
  <div class="sidebar">Sidebar (sticky)</div>
  <div style="clear:both"></div>
</div>


.content{
  float: right;
  width: 80%;
  margin-left: 20%;
}

.sidebar {
  float: left;
  width: 20%;
  position: -webkit-sticky;
  position: sticky;
  bottom: 30px;
}

也在 https://codepen.io/anon/pen/awNorj 上

我哪里错了？

Answer 1

您最初的问题是 css 技巧适用于顶部元素但不适用于底部元素。因为技巧依赖于左上角的位置。要对左下角执行此操作，您需要知道侧边栏的高度。

使用粘性顶部元素，您可以:

• 将侧边栏 div 放在第一位
• 然后是你的内容 div
• 最后设置侧边栏 float:left 以便容器根据内容调整其高度

演示:https://jsfiddle.net/1owyqtcn/1/

对于粘性底部元素，float:left 技巧不起作用:它会使侧边栏溢出底部的容器。

演示:https://jsfiddle.net/d1byrhp6/4/

---

如果您不知道侧边栏的高度。

---

一种方法是使用negative margin-left trick:将侧边栏 div 放入内容 div 并将其显示在外面。侧边栏和内容现在都对齐了。但是侧边栏在内容中留下了空白。

.content{
  background: purple;
  width: 80%;
  margin-left: 20%;
}

.sidebar {
  position: sticky;
  width: 25%; /* Adjust: 25% of 80% of container is 20% of container */
  background: #ff6347;
  bottom: 30px;
  margin-left: -25%;
}

演示:https://jsfiddle.net/zg9g3134/

---

如果你知道侧边栏的高度。

---

另一种方法是使用negative margin-top trick 来抑制高度，而不是float: left。

.content{
  background: purple;
  width: 80%;
  margin-left: 20%;
}

.sidebar {
  height: 200px;
  overflow-y: hidden;
  margin-top: -200px;
  position: sticky;
  width: 20%;
  background: #ff6347;
  bottom: 30px;
}

演示:https://jsfiddle.net/rLs8dLba/2/