如何修复topmenu组件？

问题描述

滚动页面时，我需要固定topmenu组件。滚动页面时，工具栏组件也会消失。

如何做到？

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

解决方法

请尝试使用此代码来定位顶部菜单。

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