I've got a series of DIVs (Bootstrap cards) that each have their position set to sticky. They each have different 'top' values so they overlap and some content each previous one is visible underneath the next when scrolling down the page. When scrolling to see the last of the cards, instead of 'sticking' in the expected position and all the cards scrolling away together (stacked), the last cards scrolls over top of all the others. Any idea on how to make the last card stop in place and have all the cards scroll away together in their 'stacked' positions? Hopefully that makes sense...
.card {
overflow: hidden;
box-sizing: border-box;
transition: all 0.5s;
box-shadow: 0px 0px 21px -4px rgba(0,0,0,0.8);
}
a {
color: black;
text-decoration: none !important;
}
a:hover {
color: black;
text-decoration: none;
}
#stickywrap {
position: sticky;
top: 70px;
}
.card {
position: sticky !important;
top: 0;
margin-bottom: 30px;
}
.card:nth-child(1n) {
top: 70px;
}
.card:nth-child(2n) {
top: 140px;
}
.card:nth-child(3n) {
top: 210px;
}
.card:nth-child(4n) {
top: 280px;
}
.card:nth-child(5n) {
top: 350px;
}
.card:nth-child(6n) {
top: 420px;
}
.card:nth-child(7n) {
top: 490px;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TITLE</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>
<body class="bg-light text-dark text-center">
<div class="col-8 offset-2 col-xl-6 offset-xl-3 mb-5">
<div class="row row-cols-1 row-cols-md-1 g-0 h-100" id="stickywrap">
<div class="card h-100 bg-dark text-white p-0">
<div class="card-header py-4">
<a href="#" class="stretched-link text-white">
<h3 class="m-0 p-0 fs-3">TITLE</h3>
</a>
</div>
<img src="https://via.placeholder.com/1000" class="card-img" alt="...">
</div>
<div class="card h-100 bg-dark text-white p-0">
<div class="card-header py-4">
<a href="#" class="stretched-link text-white">
<h3 class="m-0 p-0 fs-3">TITLE</h3>
</a>
</div>
<img src="https://via.placeholder.com/1000" class="card-img-top" alt="...">
</div>
<div class="card h-100 bg-dark text-white p-0">
<div class="card-header py-4">
<a href="#" class="stretched-link text-white">
<h3 class="m-0 p-0 fs-3">TITLE</h3>
</a>
</div>
<img src="https://via.placeholder.com/1000" class="card-img" alt="...">
</div>
<div class="card h-100 bg-dark text-white p-0">
<div class="card-header py-4">
<a href="#" class="stretched-link text-white">
<h3 class="m-0 p-0 fs-3">TITLE</h3>
</a>
</div>
<img src="https://via.placeholder.com/1000" class="card-img" alt="...">
</div>
<div class="card h-100 bg-dark text-white p-0">
<div class="card-header py-4">
<a href="#" class="stretched-link text-white">
<h3 class="m-0 p-0 fs-3">TITLE</h3>
</a>
</div>
<img src="https://via.placeholder.com/1000" class="card-img" alt="...">
</div>
<div class="card h-100 bg-dark text-white p-0">
<div class="card-header py-4">
<a href="#" class="stretched-link text-white">
<h3 class="m-0 p-0 fs-3" id="steam">TITLE</h3>
</a>
</div>
<img src="https://via.placeholder.com/1000" class="card-img" alt="...">
</div>
<div class="card h-100 bg-dark text-white p-0">
<div class="card-header py-4">
<a href="#" class="stretched-link text-white">
<h3 class="m-0 p-0 fs-3" id="steam">TITLE</h3>
</a>
</div>
<img src="https://via.placeholder.com/1000" class="card-img" alt="...">
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</body>
</html>