<section>
<div class="tile"></div>
<div class="tile sticky"> I am going to be sticky when you scroll</div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</section>
@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:[email protected]&display=swap');
* {
margin: 0;
padding: 0;
font-family: 'Kumbh Sans';
}
body {
background-image: linear-gradient(129deg, rgba(252, 190, 123, 0.1) -100%, rgba(251, 170, 105, 0.1) -35%, rgba(240, 54, 137, 0.1) 40%, rgba(152, 34, 163, 0.1) 111%);
}
section {
display: block;
width: 100%;
height: 100%;
}
.tile {
background: #efc06e;
height: 100px;
margin: 20px;
border-radius: 10px;
}
.sticky {
position: sticky;
top: 0;
background: radial-gradient(circle at 59% 168%, #e31c79 0%, #772583 97%, #283266 191%);
color: white;
text-transform: capitalize;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
// No JS needed.
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.