如何修复顶部菜单组件？

Question

我需要在滚动页面时修复顶部菜单组件。滚动页面时工具栏组件消失。

怎么做？

html:

<app-toolbar></app-toolbar>
<mat-sidenav-container>
    <mat-sidenav-content fxLayout="column">
        <app-topmenu></app-topmenu>
        <div fxFlex="1 1 auto">
            <router-outlet></router-outlet>
        </div>
        <app-footer ></app-footer>
    </mat-sidenav-content>
</mat-sidenav-container>

css:

mat-sidenav-container {
    min-height      : calc(100% - 60px);
    height          : calc(100% - 60px);
    background-color: #eaeaea;
}

mat-sidenav-content {
    min-height: 100%;
    height    : 100%;
}

Answer 1

试试这个代码来定位顶部菜单。

app-topmenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%
}