我遇到了粘性定位功能的一个奇怪问题，它干扰了滚动定位。
我的意图相当普遍：当访问者滚动页面时，始终可以看到侧边栏中的广告。
根据定义，它可以在下面的代码中看到 - 或者如果您愿意，可以在the Fiddle中找到：
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>
但是，如果真正的粘性内容需要一段时间才能加载，这在Google AdSense中非常常见，并且用户开始向下滚动页面（或按 Page Down ，结束，箭头......）当所述慢速内容最终完成加载整个页面滚动到顶部。
我调试了我的JS，以确保它不是我的错。此外，当我删除position: sticky;声明跳跃停止。
比我如何解决这个问题更重要的是，我想知道为什么会发生这种情况