為父 div 設置了溢出-x 的位置粘性

Question

我正在嘗試做一個帶有位置的粘性標題：粘性樣式。

位置粘性的問題是它不會工作，如果父容器有一些溢出設置。 但是，就我而言，我有一個水平滾動條。 因為，我正在為父容器（溢出-x）放置一個滾動條，粘性不起作用。

JSB鏈接

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

在給出的示例中，您可以看到，第一個塊粘性不起作用（因為我設置了溢出-x）。 但是，它適用於第二項。

所以，我的問題是如何使用為父級設置的溢出-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 來定位相對於它們的容器的標題）

 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>