I have an element that I am making sticky with position sticky:
#header {
position: sticky;
width: 100vw;
top: 0;
}
<app-header id="header"></app-header>
And that works fine, but I realised that if I use:
body {
overflow-x: hidden;
}
That breaks sticky, and I need to set body overflow-x
to hidden
, how can I fix that, with only CSS solution, no JS solutions?
The sticky doesn't work inside element with overflow: hidden or auto.
Refer to this https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky
A workaround can be working with this library
UPDATE:
This has been successfully tested on Safari v12.0.2, Firefox v64.0, and Chrome v71.0.3578.98
Added position: -webkit-sticky;
for Safari.
Unfortunately the spec is not too clear about the implications of overflow-x: hidden;
on position sticky, but there is a way to fix this. Thankfully there is an issue to hopefully fix this: https://github.com/w3c/csswg-drafts/issues/865.
The simple solution is to remove or unset overflow-x: hidden;
from every ancestor of the element you want to have position: sticky;
. Then you can have overflow-x: hidden;
on the body and it will work!
Also double check that you don't have overflow set on both the body and html tags which I posted about more in depth here: https://stackoverflow.com/a/54116725/6502003
Here is a pen if you want to play around with it: https://codepen.io/RyanGarant/pen/REYPaJ
/*
Try commenting out overflow on body style and uncommenting
overflow on .overflow-x-hidden class and you will see
position sticky stop working!
*/
body {
overflow-x: hidden;
}
.overflow-x-hidden {
/* overflow-x: hidden; */
border: 1px solid blue;
}
h1 {
background: palevioletred;
color: #fff;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.tall {
background: linear-gradient(to bottom, paleturquoise, white);
height: 300vh;
width: 100%;
}
<div class="overflow-x-hidden">
<h1>I want to be sticky!</h1>
<div class="tall"></div>
</div>
can you try with the following...
#one { position: sticky; top: 10px; }* {
box-sizing: border-box;
}
body{overflow-x: hidden;}
dl > div {
background: #FFF;
padding: 24px 0 0 0;
}
dt {
background: #B8C1C8;
border-bottom: 1px solid #989EA4;
border-top: 1px solid #717D85;
color: #FFF;
font: bold 18px/21px Helvetica, Arial, sans-serif;
margin: 0;
padding: 2px 0 0 12px;
position: -webkit-sticky;
position: sticky;
top: -1px;
}
dd {
font: bold 20px/45px Helvetica, Arial, sans-serif;
margin: 0;
padding: 0 0 0 12px;
white-space: nowrap;
}
dd + dd {
border-top: 1px solid #CCC;
}
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/position -->
<dl>
<div>
<dt>A</dt>
<dd>Andrew W.K.</dd>
<dd>Apparat</dd>
<dd>Arcade Fire</dd>
<dd>At The Drive-In</dd>
<dd>Aziz Ansari</dd>
</div>
<div>
<dt>C</dt>
<dd>Chromeo</dd>
<dd>Common</dd>
<dd>Converge</dd>
<dd>Crystal Castles</dd>
<dd>Cursive</dd>
</div>
<div>
<dt>E</dt>
<dd>Explosions In The Sky</dd>
</div>
<div>
<dt>T</dt>
<dd>Ted Leo & The Pharmacists</dd>
<dd>T-Pain</dd>
<dd>Thrice</dd>
<dd>TV On The Radio</dd>
<dd>Two Gallants</dd>
</div>
</dl>