Question

我正在尝试使用position：sticky style做一个粘性标题。

如果父容器有一些溢出设置，则位置粘滞的问题是它不起作用。但是，在我的情况下，我有一个水平滚动。因为，我正在为父容器（overflow-x）放置一个滚动，粘性不起作用。

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

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

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

Answer 1

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

您需要为可滚动内容设置height。至少这是我希望position:sticky与overflow

一起使用的唯一解决方案

希望有所帮助

OBS：在Firefox中检查它，因为在Chrome中它不起作用（position:sticky - ＆gt; 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>

位置粘贴溢出-x为父div设置

1 个答案: