Looking for some help with making my form sticky while users scroll past other content on the page.
I've used this method successfully before, but for some reason it's not working this time. Can anyone shed some light on why my form won't stick in this instance?
.sticky-top {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1020;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row justify-content-around">
<div class="col-5">
<!-- sticky -->
<div class="sticky-top">
<div class="card card__body box-shadow" style="background-color:green;">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 ">
<div class="form-group service-form-group">
<label class="control-label sr-only" for="name"></label>
<input id="name" type="text" placeholder="First Name" class="form-control" required>
<div class="form-icon"><i class="fa fa-user"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5 col-12">
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
<h2>Placeholder</h2>
</div>
</div>
</div>