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

Question

http://104.193.173.104/modx/contact-information.html

向下滚动时，我在顶部栏下方添加了我正在构建的网站的面包屑。出于某种原因，当切换发生时，网站的其余内容会跳起来。有什么想法吗？

我的面包屑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;
}

"affix"脚本：

<script>

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

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

</script>

面包屑 HTML（我使用的是 ModX，所以这可能没什么用）：

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

Answer 1

因为您的面包屑栏在 position:relative（文档流中）和 position:fixed（文档流外）之间切换。

不在文档流中的内容不会占用 space，其他元素将转移以填补空白。如果您希望它保持不变，那么最好的解决方案可能是使默认定位 position:absolute 具有适当的顶部值（以及以下元素的一些顶部边距），以便默认情况下该元素已经在文档流。

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

Why does the main content of my website jump?

html

javascript

css

jquery

breadcrumbs