Javascript 为什么我的网站的主要内容会跳跃？

向下滚动时，我会在顶部栏下粘贴我正在构建的网站的面包屑。由于某种原因，当切换发生时，网站的其他内容会跳起来。你知道为什么吗

我的面包屑CSS：

#breadcrumb {
  padding-left: 18px;
  margin-bottom: 18px;
  box-shadow: 0px -5px 10px #000;
}

#breadcrumb ul {
  margin-top: 0;
  margin-bottom: 0px;
}

#breadcrumb.affix {
  position: fixed;
  top: 52px;
  width: 100%;
  z-index: 499;
  box-shadow: 0px -8px 15px #000;
}

“粘贴”脚本：

//面包屑粘贴//
$（函数（）{
$（'breadcrumb wrapper'）.height（$（'breadcrumb'）.height（））；
$（“#面包屑”）。粘贴({
偏移量：{top:$（'#breadcrumb'）.offset（）.top-51}
});
});

还有面包屑HTML（我正在使用ModX，所以这可能没有多大帮助）：

[[Breadcrumb？&exclude=`2,3,4,5,6,7,8,15`]

因为面包屑条在

位置：相对
（文档流中）和
位置：固定
（文档流外）之间切换

文档流中未包含的内容不会占用空间，其他元素将移动以填补空白。如果您希望它是常量，那么最好的解决方案可能是使用适当的顶部值（以及以下元素上的一些顶部边距）设置默认位置
position:absolute
，以便默认情况下该元素已经在文档流之外。
您的演示站点不会执行您声称的操作。您还破坏了HTML，这可能解释了为什么我无法在浏览器中看到您的问题。看：谢谢@Sparky。我正在修补CSS，所以这就是为什么它在一段时间内做了一些不同的事情。谢谢你的验证链接，我不知道这个资源。谢谢，@Draco18s。我认为这可能与position属性有关，但我总是很难弄清楚哪个做了哪个。所以我需要把我的面包屑放在适当的位置？我再补一些。干杯编辑：我尝试添加
位置：绝对和
顶部：52px
添加到#breadcrumb.affix div，但这似乎使它完全消失了：（@MatthewMeredith很乐意帮助，别忘了接受答案。）你的建议有帮助，但不幸的是问题仍然存在。更改为
absolute
会让事情变得更糟，所以我又回到了内容跳跃。如果你的意思是内容向上移动并被隐藏，你需要在flow对象中插入一些边距或其他内容，以便再次将内容向下推。好的，这是有意义的。。。但是，在添加
.affix
之前，这不会将所有内容都向下推吗？我的
内容包装器的顶部已经有了18px的边距。
<script>

    // BREADCRUMB AFFIX //
    $(function() {
        $('#breadcrumb-wrapper').height($("#breadcrumb").height());

        $('#breadcrumb').affix({
            offset: { top: $('#breadcrumb').offset().top - 51 }
        });
    });

</script>

<div id="breadcrumb">
    [[Breadcrumb? &exclude=`2,3,4,5,6,7,8,15`]]
</div>