位置粘性，并为父 div 设置了 Overflow-x

Question

我正在尝试使用位置：粘性样式制作粘性标题。

位置粘性的问题是，如果父容器设置了一些溢出，它就无法工作。但是，就我而言，我有一个水平滚动条。因为，我为父容器（overflow-x）放置了一个滚动条，所以粘性功能不起作用。

JSBin链接

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

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

所以，我的问题是如何通过为父级设置的 Overflow-x 使位置粘性工作。

Answer 1

您可能知道，position:sticky;top:10px对元素进行设置意味着首先使用 with 来考虑它position:relative，然后再考虑10pxwith position:fixed;

您需要height为可滚动内容设置 a 。至少这是我知道当你想要position:sticky使用时的唯一解决方案overflow

希望能帮助到你

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

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>