CSS sticky positioning forcing scroll to the top after page load - css

Question

I'm experiencing an odd issue with the sticky positioning feature that's interfering with the scroll positioning.
My intention is fairly common: keep an advertisement in a sidebar always visible when the visitor scrolls the page.
It does work as per definition as you can see in the code below — or in the Fiddle if you prefer:
body {
margin: 6rem;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sidebar .ads {
position: sticky;
top: 1rem;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<section class="col-md-10 listing">
<div class="row">
<div class="col-md-4">
<div class="card-deck">
<div class="card" data-mh="card">
<a href="">
<img class="card-img-top thumbnail" src="https://orig00.deviantart.net/63b7/f/2013/041/9/d/free_youtube_thumbnail_template_by_imaura-d5ugja7.png" alt="Thumbnail" />
</a>
<div class="card-block">
<h3 class="card-title d-flex align-items-center hidden-sm-down lang-en">
Title
</h3>
Et aliquip non culpa pariatur quis et consectetur dolor eu laborum in nisi voluptate ut commodo dolore dolore anim est et in eu voluptate velit nulla nisi occaecat anim ut.
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-deck">
<div class="card" data-mh="card">
<a href="">
<img class="card-img-top thumbnail" src="https://orig00.deviantart.net/63b7/f/2013/041/9/d/free_youtube_thumbnail_template_by_imaura-d5ugja7.png" alt="Thumbnail" />
</a>
<div class="card-block">
<h3 class="card-title d-flex align-items-center hidden-sm-down lang-en">
Title
</h3>
Et aliquip non culpa pariatur quis et consectetur dolor eu laborum in nisi voluptate ut commodo dolore dolore anim est et in eu voluptate velit nulla nisi occaecat anim ut.
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-deck">
<div class="card" data-mh="card">
<a href="">
<img class="card-img-top thumbnail" src="https://orig00.deviantart.net/63b7/f/2013/041/9/d/free_youtube_thumbnail_template_by_imaura-d5ugja7.png" alt="Thumbnail" />
</a>
<div class="card-block">
<h3 class="card-title d-flex align-items-center hidden-sm-down lang-en">
Title
</h3>
Et aliquip non culpa pariatur quis et consectetur dolor eu laborum in nisi voluptate ut commodo dolore dolore anim est et in eu voluptate velit nulla nisi occaecat anim ut.
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-deck">
<div class="card" data-mh="card">
<a href="">
<img class="card-img-top thumbnail" src="https://orig00.deviantart.net/63b7/f/2013/041/9/d/free_youtube_thumbnail_template_by_imaura-d5ugja7.png" alt="Thumbnail" />
</a>
<div class="card-block">
<h3 class="card-title d-flex align-items-center hidden-sm-down lang-en">
Title
</h3>
Et aliquip non culpa pariatur quis et consectetur dolor eu laborum in nisi voluptate ut commodo dolore dolore anim est et in eu voluptate velit nulla nisi occaecat anim ut.
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-deck">
<div class="card" data-mh="card">
<a href="">
<img class="card-img-top thumbnail" src="https://orig00.deviantart.net/63b7/f/2013/041/9/d/free_youtube_thumbnail_template_by_imaura-d5ugja7.png" alt="Thumbnail" />
</a>
<div class="card-block">
<h3 class="card-title d-flex align-items-center hidden-sm-down lang-en">
Title
</h3>
Et aliquip non culpa pariatur quis et consectetur dolor eu laborum in nisi voluptate ut commodo dolore dolore anim est et in eu voluptate velit nulla nisi occaecat anim ut.
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-deck">
<div class="card" data-mh="card">
<a href="">
<img class="card-img-top thumbnail" src="https://orig00.deviantart.net/63b7/f/2013/041/9/d/free_youtube_thumbnail_template_by_imaura-d5ugja7.png" alt="Thumbnail" />
</a>
<div class="card-block">
<h3 class="card-title d-flex align-items-center hidden-sm-down lang-en">
Title
</h3>
Et aliquip non culpa pariatur quis et consectetur dolor eu laborum in nisi voluptate ut commodo dolore dolore anim est et in eu voluptate velit nulla nisi occaecat anim ut.
</div>
</div>
</div>
</div>
</div>
</section>
<section class="col-md-2 hidden-sm-down sidebar">
<div class="ads">
Sticky content
</div>
</section>
</div>
</div>
<div class="hidden-sm-up">
<br /><br /><br /><br />
</div>
However, if the real sticky content takes a while to load, which is very common with Google AdSense and alike, and the user starts scrolling down the page (or press Page Down, End, arrows...) when the said slow content finally finishes loading the whole page scrolls to the top.
I've debugged my JS to make sure it wasn't my fault. Also, when I removed the position: sticky; declaration jumping stopped.
More important than how could I fix this, I would like to know why this is happening