html - 为父 div 设置 overflow-x 的位置 Sticky

Question

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

position sticky 的问题是如果父容器设置了溢出，它就无法工作。但是，就我而言，我有一个水平滚动条。因为，我正在为父容器 (overflow-x) 放置一个滚动条，所以粘滞不工作。

JSBin Link

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

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

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

Answer 1

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

您需要为可滚动内容设置一个高度。至少当您希望 position:sticky 与 overflow

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

希望对你有帮助

OBS: 在 Firefox 中检查它，因为在 Chrome 中它不起作用(position:sticky -> 这是一个实验性 API，不应使用在生产代码中。 我建议您找到另一个解决方案。例如 position:fixed 并使用 JQ 相对于其容器定位 header )

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>