Please take a look at the demo code. When you scroll to the bottom, the stick to top element is always at the top, but the stick to bottom element does not stick to the bottom at all. Is there anything wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row" style="height: 2000px;">
<div class="col bg-success">
<div class="col bg-info" style="position: sticky; top: 0">
Stick to top
</div>
</div>
<div class="col bg-danger">
<div class="col bg-warning" style="position: sticky; bottom: 0">
Stick to bottom
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"
></script>
</body>
</html>Thank you.
I recommend paying attention to this answer to a similar problem. In your case, accordingly, you can try to make the parent element as flex (.d-flex in Bootstrap), and for the stick element add margin-top: auto (.mt-auto in Bootstrap).
A modified example is below:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row" style="height: 2000px;">
<div class="col bg-success">
<div class="col bg-info" style="position: sticky; top: 0">
Stick to top
</div>
</div>
<div class="col bg-danger d-flex">
<div class="col bg-warning mt-auto" style="position: sticky; bottom: 0">
Stick to bottom
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"
></script>
</body>
</html>