<div class="wrapper">
<div class="sticky">position: sticky;</div>
</div>
body {
padding: 40px;
width: 400vw;
height: 400vh;
}
.wrapper {
background-color: #ccc;
padding: 300px;
height: 200vh;
width: 200vw;
}
.sticky {
background-color: #009688;
width: 50vw;
height: 50vh;
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
color: #fff;
display: flex;
font-size: 44px;
font-weight: bold;
align-item: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.