在Angular 2材料中添加Sticky FAB

Question

我想在我的角度2素材项目的屏幕底部(而不是页面)添加一个粘滞按钮.我尝试了一些调整,但目前当我向下滚动按钮时,它并没有停留在它应该是的位置.

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

滚动后:

模板中元素的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材料可以做我想要的吗？

更新:

我的主要组件的模板:

<toolbar></toolbar>
<side-nav></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%;
}

然后在路由器插座添加的组件内部将出现FAB元素.

Notes-list组件的模板(图像中显示的模板):

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

//rest of the content

现场演示

Answer 1

将路由器插座放在md-sidenav-container中是正确的.

将以下类添加到FAB元素.

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

这就是我开始工作的方式.