时间戳

首页 > 解决方案 > Angular 8应用程序，使用片段时与标题重叠

javascript - Angular 8应用程序，使用片段时与标题重叠

问题描述

我有一个链接，通过单击链接，我想滚动到页面底部的片段。当我单击链接时，该片段正在工作，但该片段被标题组件重叠。请看图片：

以下是我的 app.component.html 中的代码：

<div class="layout-wrapper">
  <header>
  <app-header></app-header>
</header>  
  <main id="layout-content" [ngClass]="{ active: menuActive }">
    <div>
      <router-outlet></router-outlet>
    </div>
  </main>
  <footer>
  <app-footer></app-footer>
  </footer>
</div>

在主标签上，我有一个 CSS 样式，顶部有填充

#layout-content {
    margin-left: 0;
    padding-top: 120px;
    margin-right: 0;
  }

但是，当我单击片段链接时，它会将其带到顶部并与标题重叠。

我的链接和片段的组件代码：

<a [routerLink]="['/proposal']" fragment="dcn">{{ dcn }}</a>

<section id="dcn">
Some other html here
</section>

为什么不应用填充？如何应用填充？

实际的： 实际的

预期的： 预期的

标签： javascriptcssangulartypescript

解决方案

在想出一个使用 css 的解决方案之后，我查看了 angular routing api 并找到了解决方案，它正在使用

    scrollOffset: [0, 135]

在我的 app-routing.module.ts 文件中的路由选项中。现在，片段在 135px 之后开始，这是我的标题的长度。

推荐阅读