Live
<div class="container"> <div class="other"> <p>1111111</p> <p>1111111</p> <p>1111111</p> <p>1111111</p> <p>1111111</p> <div class="hidden"> <div class="sticky"> <p>2222222</p> <p>2222222</p> <p>2222222</p> <p>2222222</p> </div> </div> <p>1111111</p> <p>1111111</p> <p>1111111</p> <p>1111111</p> <p>1111111</p> <p>1111111</p> <p>1111111</p> <p>1111111</p> <p>1111111</p> <p>1111111</p> <p>1111111</p> <p>1111111</p> <p>1111111</p> <p>1111111</p> </div></div>
Live
x
html, body { width: 100%; height: 100%; display: flex;}.container { position: relative; width: 300px; height: 100vh; margin: auto; border: 1px solid #333; overflow: scroll; line-height: 42px;}.sticky { background: deeppink; position: sticky; top: 0;}.hidden { height: 100vh; background: yellowgreen; overflow: hidden;}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.