如果父容器有一些溢出设置，位置粘滞的问题不会起作用。但是，就我而言，我有一个水平滚动。因为，我正在为父容器（overflow-x）放置一个滚动条，粘性不起作用。
.sticky {
位置：sticky;
top：10px;
z-index：1;
$ b在给出的示例中，您可以看到，第一个块粘滞不工作（因为我已经设置了overflow-x）。但是，它正在为第二项工作。
所以，我的问题是如何使用父级的overflow-x设置位置粘性工作。 解决方案
正如你可能知道的，在一个元素上设置 position：sticky; top：10px 意味着首先它被认为是 position：relative ，然后在 10px 之后加上 position：fixed ;
您需要为可滚动内容设置高度。至少这是我知道当你想要 position：sticky 来处理溢出
的唯一解决方案希望它有帮助
OBS：在Firefox中检查，因为在Chrome中不起作用位置：sticky - > 这是一个实验性API，不应该用于生产代码。我建议你找另一个解决方案，像位置：固定并使用JQ将标头相对于其容器放置）
$ b
html，body {overflow：initial; background：none;} body {box-sizing：border-box; margin：0 150px; font-family：'Source Sans Pro'，sans-serif;}。sticky {position：sticky;顶部：10px; z-index：1;} [data-lorem] {margin-top：2em;行高：1.5; text-align：justify;背景：#eee; border-radius：5px; padding：15px;} [data-lorem] .sticky {background：＃3A5E8C; padding：15px 10px;白颜色; border-radius：5px;显示：inline-block;宽度：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;显示：无; text-align：center;} < div data- lorem =pstyle =overflow-x：scroll; height：80vh;> < div class =content_areastyle =width：1000px;> < span class =sticky>< h2>否< / h2>< img src =http://www.html5rocks.com/static/images/share.pngtitle =只是一个例子 >< / span> Donec et oodi pellentesque diam。 Interdum varius坐在amet mattis。在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èrephaselus egestas tellus rutrum tellus pellentesque eu tincidunt tortor。 Pellentesque nec nam aliquam sem。 Enim lobortis scelerisque fermentum dui faucibus in。在nibh mauris cursus mattis molestie在erat的一个iaculis。在lectus urna duis convallis convallis tellus id interdum velit。 Massa sapien faucibus et molestie.Proin libero nunc consequat interdum varius sit。 Risus在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坐在amet massa简历。 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。请将您的信息发送给我们。 Et egestas quis ipsum ipsum suspendisse ultrices gravida。 Malesuada fames ac turpis egestas integer eget aliquet nibh praesent。 Pretium vulputate sapien nec sagittis aliquam malesuada。坐amet nulla facilisi morbi tempus。在lectus urna duis convallis一个erat nam。 Commodo quis imperdiet massa tincidunt nunc pulvinar。 Justo eget magna fermentum iaculis。接下来，我们将继续努力。 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。 Accumulate in nisl nisi scelerisque eu ultrices vitae auctor eu。< / div>< / div>< div data-lorem =p> < span class =sticky>< h2> JavaScript< / h2>< / span> Donec et.One pellentesque diam。 Interdum varius坐在amet mattis。在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èrephaselus egestas tellus rutrum tellus pellentesque eu tincidunt tortor。 Pellentesque nec nam aliquam sem。 Enim lobortis scelerisque fermentum dui faucibus in。在nibh mauris cursus mattis molestie在erat的一个iaculis。在lectus urna duis convallis convallis tellus id interdum velit。 Massa sapien faucibus et molestie.Proin libero nunc consequat interdum varius sit。 Risus在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坐在amet massa简历。 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。请将您的信息发送给我们。 Et egestas quis ipsum ipsum suspendisse ultrices gravida。 Malesuada fames ac turpis egestas integer eget aliquet nibh praesent。 Pretium vulputate sapien nec sagittis aliquam malesuada。坐amet nulla facilisi morbi tempus。在lectus urna duis convallis一个erat nam。 Commodo quis imperdiet massa tincidunt nunc pulvinar。 Justo eget magna fermentum iaculis。接下来，我们将继续努力。 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。 Accumisan in nisl nisi scelerisque eu ultrices vitae auctor eu。< / div>
I am trying to do a sticky header with position: sticky style.
The problem with position sticky is it wont work, if the parent container has some overflow set. But, in my case, I have a horizontal scroll. Since, I am putting a scroll for parent container ( overflow-x), the sticky is not working.
.sticky {
position: sticky;
top: 10px;
z-index: 1;
}
In the example given you can see that, first block sticky is not working (because I have set overflow-x). But, it is working for the second item.
So, my question is how to make position sticky work with overflow-x set for parent.
as you probably know, setting position:sticky;top:10px on an element means that at first it is considered with position:relative and then after 10px with position:fixed ;
you need to set a height for the scrollable content. at least this is the only solution i know when you want position:sticky to work with overflow
hope it helps
OBS : check it in Firefox because in Chrome it doesn't work ( position:sticky -> This is an experimental API that should not be used in production code. i suggest you find another solution. like position:fixed and use JQ to position the headers relative to their containers )
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>
这篇关于对父div使用overflow-x设置Sticky位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！