css - 在 Angular 2 Material 中添加 Sticky FAB

Question

我想在我的 Angular 2 Material 元素的屏幕底部(不是页面)添加一个粘性按钮。我尝试了一些调整，但目前当我向下滚动时，按钮不会停留在它应该在的位置。

在滚动之前它看起来像下面这样:

滚动后:

Elements 的 HTML 内部模板:

<a md-fab id="fab">
    <md-icon>add</md-icon>
</a>

应用于元素的 CSS 除了任何默认值:

#fab{
    position: fixed;
    right: 30px;
    bottom: 30px;
}
*{
    margin: 0;
}

1. 我该如何解决这个问题？
2. 此外，是否有任何内置 Angular Material 的方法可以满足我的要求？

更新:

我的主要组件的模板:

<toolbar></toolbar>
<side-nav></side-nav>

侧边导航模板:

<md-sidenav-container id="sidenav-container">

    // contents

    <router-outlet></router-outlet>

</md-sidenav-container>

及其 CSS:

#sidenav-container { // styling to make side nav of full height
    position: fixed;
    height: 90%;
    min-height: 90%;
    width: 100%;
    min-width: 100%;
}

然后router-outlet添加的组件里面会出现FAB元素。

Notes-list 组件的模板(如图所示):

<a md-fab id="fab">
    <md-icon>add</md-icon>
</a>

//rest of the content

LIVE DEMO

Answer 1

您将路由器导出放在 md-sidenav-container 中是正确的。

将 follow 类添加到您的 FAB 元素。

.md-fab-bottom-right2 {
    top: auto !important;
    right: 20px !important;
    bottom: 10px !important;
    left: auto !important;
    position: fixed !important;
}

这就是我让它工作的方式。