5

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.

JSBin Link

.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.

Jinto
  • 847
  • 1
  • 11
  • 27
  • overflow modify the BFC https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context and so the 10px from top is seen from the box itself and not the closest parent (body here). you may rethink style and structure codepen.io/anon/pen/dNoPRd – G-Cyrillus Jan 06 '17 at 10:40
  • 1
    `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 – Mihai T Jan 06 '17 at 10:46
  • As @MihaiT mentioned you currently shouldn't use `position:sticky;` in production. It's only supported by a few browser so far ( see: http://caniuse.com/#search=position%3Asticky ). – Smort Jan 06 '17 at 10:51
  • There is an open issue in the specs regarding the limitation to use `position: sticky;` in elements with parents that have `overflow` set to something different than `visible`: https://github.com/w3c/csswg-drafts/issues/865 – Aljullu Jan 02 '18 at 05:13

1 Answers1

3

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>
Mihai T
  • 17,254
  • 2
  • 23
  • 32
  • 1
    sticky use to work in chrome, today, you need to enable a flag to access those 'experimental' CSS rules , it's handy, it allows also to play with display:grid and so to learn how to use thoses features. Of course it is not to be used for professionnal website ... but for feed back and if these features can turn to be really usefull and efficient. ;) – G-Cyrillus Jan 06 '17 at 11:09
  • I am trying with Chrome canary and its working there. Thanks – Jinto Jan 06 '17 at 11:17