为 parent div 设置 overflow-x 的固定位置

Question

我正在尝试使用 position: sticky 样式制作粘性 header。

如果 parent 容器有一些溢出设置，位置粘性的问题是它不会工作。但是，就我而言，我有一个水平滚动条。因为，我正在为 parent 容器（overflow-x）放置一个卷轴，所以粘滞不工作。

.sticky {
   position: sticky;
   top: 10px;
   z-index: 1;
}

在给出的示例中，您可以看到，第一个块粘性不起作用（因为我已经设置了 overflow-x）。但是，它适用于第二项。

所以，我的问题是如何使用为 parent 设置的 overflow-x 设置位置粘性。

Answer 1

您可能知道，在元素上设置 position:sticky;top:10px 意味着首先考虑使用 position:relative，然后在 10px 之后使用 position:fixed ;

您需要为可滚动内容设置一个height。至少当你想让 position:sticky 与 overflow

一起工作时，这是我知道的唯一解决方案

希望对您有所帮助

OBS : 在 Firefox 中检查它，因为在 Chrome 中它不起作用（ position:sticky -> This is an experimental API that should not be used in production code. 我建议你找到另一个解决方案。像 position:fixed 并使用 JQ 将 headers 相对于它们的容器定位 )

html, body {
  overflow: initial;
  background: none;
}
body {
  box-sizing: border-box;
  margin: 0 150px;
  font-family: 'Source Sans Pro', sans-serif;
}
.sticky {
  position:sticky;
  top: 10px;
  z-index: 1;
}
[data-lorem] {
  margin-top: 2em;
  line-height: 1.5;
  text-align: justify;
  background: #eee;
  border-radius: 5px;
  padding: 15px;
}
[data-lorem] .sticky {
  background: #3A5E8C;
  padding: 15px 10px;
  color: white;
  border-radius: 5px;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}
[data-lorem] h2 {
  float: left;
  margin: 0;
}
[data-lorem] img {
  float: right;
  margin-top: 5px;
}
.nosupport {
  color: darkred;
  font-weight: bold;
  display: none;
  text-align: center;
}

<div data-lorem="p" style="
    overflow-x: scroll;height:80vh;
">
  <div class="content_area" style="
    width: 1000px;
">
  <span class="sticky"><h2>No</h2><img src="http://www.html5rocks.com/static/images/share.png" title="Just an example"></span>
Donec et odio pellentesque diam. Interdum varius sit amet mattis. In fermentum posuere urna nec tincidunt praesent semper. Auctor augue mauris augue neque. Vitae congue eu consequat ac felis donec. Pellentesque diam volutpat commodo sed egestas egestas. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Pellentesque nec nam aliquam sem. Enim lobortis scelerisque fermentum dui faucibus in. In nibh mauris cursus mattis molestie a iaculis at erat. At lectus urna duis convallis convallis tellus id interdum velit. Massa sapien faucibus et molestie.
Proin libero nunc consequat interdum varius sit. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Sem viverra aliquet eget sit amet tellus cras adipiscing. Tortor consequat id porta nibh. Diam maecenas sed enim ut. Cras ornare arcu dui vivamus arcu felis. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Enim tortor at auctor urna nunc id. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Nisi scelerisque eu ultrices vitae auctor eu augue.
Vulputate dignissim suspendisse in est ante in nibh mauris. Netus et malesuada fames ac turpis egestas integer eget aliquet. Turpis egestas integer eget aliquet nibh praesent tristique magna. Ut placerat orci nulla pellentesque dignissim enim. Et egestas quis ipsum suspendisse ultrices gravida. Malesuada fames ac turpis egestas integer eget aliquet nibh praesent. Pretium vulputate sapien nec sagittis aliquam malesuada. Sit amet nulla facilisi morbi tempus. A erat nam at lectus urna duis convallis. Commodo quis imperdiet massa tincidunt nunc pulvinar. Justo eget magna fermentum iaculis. Ac ut consequat semper viverra nam libero justo laoreet. Neque volutpat ac tincidunt vitae semper. Lacus vel facilisis volutpat est velit. Nunc sed blandit libero volutpat sed cras. Et magnis dis parturient montes nascetur ridiculus. Vitae congue eu consequat ac. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor eu.</div></div>


<div data-lorem="p">
  <span class="sticky"><h2>JavaScript</h2></span>
Donec et odio pellentesque diam. Interdum varius sit amet mattis. In fermentum posuere urna nec tincidunt praesent semper. Auctor augue mauris augue neque. Vitae congue eu consequat ac felis donec. Pellentesque diam volutpat commodo sed egestas egestas. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Pellentesque nec nam aliquam sem. Enim lobortis scelerisque fermentum dui faucibus in. In nibh mauris cursus mattis molestie a iaculis at erat. At lectus urna duis convallis convallis tellus id interdum velit. Massa sapien faucibus et molestie.
Proin libero nunc consequat interdum varius sit. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Sem viverra aliquet eget sit amet tellus cras adipiscing. Tortor consequat id porta nibh. Diam maecenas sed enim ut. Cras ornare arcu dui vivamus arcu felis. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Enim tortor at auctor urna nunc id. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Nisi scelerisque eu ultrices vitae auctor eu augue.
Vulputate dignissim suspendisse in est ante in nibh mauris. Netus et malesuada fames ac turpis egestas integer eget aliquet. Turpis egestas integer eget aliquet nibh praesent tristique magna. Ut placerat orci nulla pellentesque dignissim enim. Et egestas quis ipsum suspendisse ultrices gravida. Malesuada fames ac turpis egestas integer eget aliquet nibh praesent. Pretium vulputate sapien nec sagittis aliquam malesuada. Sit amet nulla facilisi morbi tempus. A erat nam at lectus urna duis convallis. Commodo quis imperdiet massa tincidunt nunc pulvinar. Justo eget magna fermentum iaculis. Ac ut consequat semper viverra nam libero justo laoreet. Neque volutpat ac tincidunt vitae semper. Lacus vel facilisis volutpat est velit. Nunc sed blandit libero volutpat sed cras. Et magnis dis parturient montes nascetur ridiculus. Vitae congue eu consequat ac. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor eu.</div>

为 parent div 设置 overflow-x 的固定位置

Position Sticky with overflow-x set for parent div

html

css

position