I'm trying to make a Bootstrap 4 card sticky to the top underneath the navbar when the user scrolls down to it and then leave it in it's original place when scrolling to the top of the page.
I have tried using Bootstrap's sticky-top class as well as other answers on here without luck.
There are none of these overflow properties linked to the item, overflow overflow-x etc or any margins as suggested in this question -Why is my .sticky-top class not working in Bootstrap 4?
I don't know Javascript or jQuery very well so I have included those tags in case that is my best option but the Bootstrap class should do what I want?
I have made a codepen here - https://codepen.io/grabthereef/pen/pojppmZ
My code;
<!-- First Panel -->
<section id="first-panel">
<div class="container">
<div class="row my-5">
<div class="col-md-9">
<div class="row">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-4">
<img src="https://via.placeholder.com/150" class="card-img">
</div>
<div class="col-md-8">
<div class="card-body">
<h2 class="card-title"><strong>Get in Contact</strong></h2>
<p class="card-text">Give us a call to start the process. We will be there to answer questions you may have and give you some tips on packaging and organising</p>
</div>
</div>
</div>
</div>
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-8">
<div class="card-body">
<h2 class="card-title"><strong>Send us your photos and/or VHS tapes</strong></h2>
<p class="card-text">Have a look and organise your old photographs into sizes. To get a rough price, simply count or try and guess how many photos you need scanned. If you are sending videos, roughly guess how many hours of footage there is. You can use our easy calculators to work out a rough cost.<br>
Carefully package your photographs and videos send your parcel to us via a recorded delivery service such as DHL or UPS. We will confirm receipt of your package. Please read our packing tips</p>
</div>
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/150" class="card-img">
</div>
</div>
</div>
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-4">
<img src="https://via.placeholder.com/150" class="card-img">
</div>
<div class="col-md-8">
<div class="card-body">
<h2 class="card-title"><strong>We return your originals and digital media</strong></h2>
<p class="card-text">Your photographs and videos will be sent back to you via a trusted courier service along with DVD discs and USB sticks if you require them.</p>
</div>
</div>
</div>
</div>
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-8">
<div class="card-body">
<h2 class="card-title"><strong>You enjoy sharing with family and friends</strong></h2>
<p class="card-text">This is the best part! Now you have your photos and videos in a digital format you have so many possibilities. You can get them printed onto canvas, t-shirts, share with family, post to social media and so on…. Or maybe you just like the peace of mind knowing your precious memories are now safe.</p>
</div>
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/150" class="card-img">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div id="calculator sticky-top">
<div class="card text-center">
<h5 class="card-header heading">Get a Quote!</h5>
<div class="card-body mt-4">
<form id="cost-form">
<div class="form-group">
<input type="number" class="form-control" id="amount" required placeholder="Enter Amount">
</div>
<button type="submit" class="btn btn-lightblue mb-4">Calculate</button>
</form>
<div id="loading">
<img src="" alt="">
</div>
<div id="results" class="pt-4">
<h5>Results</h5>
<h2 id="total-payment">£0.00</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
