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;
}

“词缀”脚本：

<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之间切换（在文档流程之外）。

不在文档流程中的东西不占用空间，其他元素将转移填补空白。如果你想让它保持不变，那么最好的解决方案可能是使默认定位position:absolute具有适当的顶值（以及后面元素的一些上边距），这样默认情况下元素已经在文件流程。

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

1 个答案: