固定菜单中的项目 angular

Question

我有这段代码可以向用户显示未读通知：

<mat-menu #menu="matMenu">
    <div class="menu-item" mat-menu-item *ngFor="let item of notifications">
        ...item content
    </div>
    <button class="show-all-btn" mat-menu-item (click)="navigateToNotification()">show all</button>
</mat-menu>

正如您在上面的代码中看到的那样，我通过 *ngFor 指令生成了菜单项，并且作为最后一个菜单项，我添加了每次都存在于我的菜单中的“显示全部”按钮。我怎样才能在垫子菜单底部的固定位置显示这个按钮，不能通过滚动项目移动

Answer 1

我会用位置粘性来做，最少需要的样式是

.menu {
  position: relative;
}

.sticky {
  position: sticky;
  bottom: 0;
  background: white;
  z-index: 1;
}

Stackblitz example

固定菜单中的项目 angular

fixed item in mat-menu angular

css

angular-material

angular