Question

我想在我的角度2素材项目的屏幕底部（而不是页面）添加一个粘滞按钮。我尝试了一些调整，但是当我向下滚动按钮时，它并没有停留在预期的位置。

滚动前的

如下所示：

滚动后

：

模板中的元素HTML：

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

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

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

我该如何解决这个问题？
此外，是否有任何内置方式使用Angular材料来做我想要的事情？

更新

我的主要组件＆＃39;模板：

<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

LIVE DEMO

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

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

Answer 2

添加自定义类并应用样式也会查找文件引用DOM的层次结构

<div class="example-container">    

  <h3>sticky icons</h3>
  <a class="mine" md-fab routerLink=".">
    <md-icon>check</md-icon>
  </a>
  <a md-mini-fab routerLink=".">
    <md-icon>check</md-icon>
  </a>

</div>

<强> LIVE DEMO

更新1：您正在使用md-sidenav容器内的图标，这是一个错误

<div class="example-container">
  <md-sidenav-container>

    <md-sidenav #sidenav>
      <p>side nav works</p>
    </md-sidenav>

  </md-sidenav-container>
    <p>content</p>
    <a class="mine" md-fab (click)="sidenav.open()">
      <md-icon>check</md-icon>
    </a>

</div>

<强> Updated Demo

更新2：

看下面的代码，你将所有内容包装在sidenav里面是错误的。使用如下

<md-sidenav-container id="sidenav-container">    </md-sidenav-container>
        // contents
    <router-outlet></router-outlet>

在Angular 2材料中添加Sticky FAB

2 个答案: