粘性定位自动“顶部”位置。

Question

便签是否有一种方法可以考虑页面上的其他便签？

例如：

body {
  display: flex;
  min-height: 2000px;
  flex-direction: column;
}
#header {
  height: 40px;
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  background: yellow;
}
#footer {
  flex: 0 0 auto;
  height: 20px;
}
#main {
  display: flex;
  flex: auto;
  background: blue;
}
#side {
  width: 200px;
  background: red;
}
#side > div {
  position: sticky;
  top: 0px;
}

<div id="header">header</div>
<div id="main">
  <div id="side">
    <div>side</div>
  </div>
  <div id="content">
    content
  </div>
</div>
<div id="footer">footer</div>

注意，如果我向下滚动，标题将与侧边栏重叠，因为它们具有相同的top位置。

要修复这个问题，我必须使侧边栏的顶部位置取决于标题的高度。

body {
  display: flex;
  min-height: 2000px;
  flex-direction: column;
}
#header {
  height: 40px;
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  background: yellow;
}
#footer {
  flex: 0 0 auto;
  height: 20px;
}
#main {
  display: flex;
  flex: auto;
  background: blue;
}
#side {
  width: 200px;
  background: red;
}
#side > div {
  position: sticky;
  top: 40px;
}

<div id="header">header</div>
<div id="main">
  <div id="side">
    <div>side</div>
  </div>
  <div id="content">
    content
  </div>
</div>
<div id="footer">footer</div>

但如果标题高度是可变的呢？我能否告诉浏览器以某种方式定位固定的内容，以避免它们重叠在一起？

- Elfy

---

嗨，我在2021年遇到了同样的问题，你找到解决办法了吗？基本上，我不想使用JavaScript来更新动态标题的顶部值。 - santiago arizti

Answer 1

我认为你需要使用JavaScript来实现这个功能。首先获取页眉的高度，然后使用该值设置侧边栏div的顶部位置。恐怕我不知道任何纯CSS的方法来实现它。

如果你正在使用jQuery，只需使用.height()方法即可；如果没有，可以使用以下方法：

var clientHeight =        document.getElementById('myDiv').clientHeight;

var offsetHeight = document.getElementById('myDiv').offsetHeight;

偏移方法获取带有任何填充和边框的高度。

- Steven Hoskins