当粘性元素在容器内时保持粘性定位行为(因为React必须呈现单个父元素)

Question

我有一个主要内容的顶部部分.

顶部包含5个部分:"主标题",3个"类别"和"设置".

如果用户向下滚动页面,"主标题"将保留sticky在页面顶部,并settings保留sticky在页面顶部.虽然"类别"仍然可见,但它们会逐渐折叠,再次使用position: sticky.

这是一个GIF示例:

这是一个演示:

body {
  height: 300vh;
}

.header {
  height: 100px;
}

.header__main {
  background-color: springgreen;
  position: sticky;
  top: 0;
}
.header__category--top {
  background-color: grey;
  position: sticky;
  top: 100px;
}
.header__category--middle {
  background-color: darkgrey;
  position: sticky;
  top: 100px;
}
.header__category--bottom {
  background-color: lightgrey;
  position: sticky;
  top: 100px;
}
.header__settings {
  background-color: gold;
  position: sticky;
  top: 100px;
}

.header, .main {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
}

.main {
  background-color: dodgerblue;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
}

<div class="header header__main">MAIN HEADER</div>
<div class="header header__category header__category--top">Category 1</div>
<div class="header header__category header__category--middle">Category 2</div>
<div class="header header__category header__category--bottom">Category 3</div>
<div class="header header__settings">Settings</div>
<div class="main">
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
</div>

但是,我的问题是,因为我将顶级内容呈现为React组件,所以它必须全部位于容器元素内.

这打破了我的粘性行为.

这是一个演示,相同的代码,但顶部包含容器元素:

body {
  height: 300vh;
}

.header {
  height: 100px;
}

.header__main {
  background-color: springgreen;
  position: sticky;
  top: 0;
}
.header__category--top {
  background-color: grey;
  position: sticky;
  top: 100px;
}
.header__category--middle {
  background-color: darkgrey;
  position: sticky;
  top: 100px;
}
.header__category--bottom {
  background-color: lightgrey;
  position: sticky;
  top: 100px;
}
.header__settings {
  background-color: gold;
  position: sticky;
  top: 100px;
}

.header, .main {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
}

.main {
  background-color: dodgerblue;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
}

<div>
  <div class="header header__main">MAIN HEADER</div>
  <div class="header header__category header__category--top">Category 1</div>
  <div class="header header__category header__category--middle">Category 2</div>
  <div class="header header__category header__category--bottom">Category 3</div>
  <div class="header header__settings">Settings</div>
</div>
<div class="main">
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
  <span>Main Content</span>
</div>

我最初想要解决这个问题的方法是:•能够返回不在容器内部的单独元素• position: sticky以这样的方式使用我的顶部部分位于容器元素内部并不重要

我怎样才能解决这个问题？

Codepen示例:

• 工作:https://codepen.io/alanbuchanan/pen/KmZrdr？edit = 1100
• 破碎:https://codepen.io/alanbuchanan/pen/ybpQpd？ editors = 1100

Answer 1

浏览器支持还不是很好，但是display: contents在容器 div 上就可以了。 https://caniuse.com/#search=display