CodePen Embed - position sticky with overflow hidden

s<br/>
o<br/>
m<br/>
e<br/>
<br/>
c<br/>
o<br/>
n<br/>
t<br/>
e<br/>
n<br/>
t<br/>
<br/>
a<br/>
b<br/>
o<br/>
v<br/>
e<br/>
.<br/>
.<br/>
.<br/>
.<br/>
.<br/>
.<br/>
.<br/>
.<br/>
.<br/>
.<br/>
.<br/>
.<br/>
<div class="wrapper">
  <div class="sticky">
    I am a sticky header
  </div>
  overflow:hidden wrapper
</div>
s<br/>
o<br/>
m<br/>
e<br/>
<br/>
c<br/>
o<br/>
n<br/>
t<br/>
e<br/>
n<br/>
t<br/>
<br/>
b<br/>
e<br/>
h<br/>
i<br/>
n<br/>
d<br/>
.<br/>
.<br/>
.<br/>
.<br/>
.<br/>
.<br/>
.<br/>
.<br/>
.<br/>
.<br/>
.<br/>
.<br/>

.wrapper {
  padding: 2em;
  background: blue;
}
.sticky {
  padding: 1em;
  background: red;
  position: sticky;
  top: 0;
}

This Pen is owned by Jennie Ji on CodePen.

See more by @jennieji on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.