angular md-fab-toolbar跟随滚动

时间:2016-10-29 15:19:41

标签: javascript angularjs angular-material

我有一张有3张牌的页面,其中一张我有一个md-fab-toolbar。

<md-card class="card-width">
          <md-toolbar class="md-hue-2" layout-align="center start" layout-padding>
            <span>{{cardName}}</span>
          </md-toolbar>
          <md-card-content>
            <div>
                        <p>Scroll</p>
                        <p>Scroll</p>
                        <p>Scroll</p>
                        <p>Scroll</p>
                        <p>Scroll</p>
                        <p>Scroll</p>
                        <p>Scroll</p>
                        <p>Scroll</p>
                        <p>Scroll</p>
                        <p>Scroll</p>
                        <p>Scroll</p>
                        <p>Scroll</p>
                        <p>Scroll</p>
                        <p>Scroll</p>
                        <p>Scroll</p>
                        <p>Scroll</p>
                        <p>Scroll</p>
                        <p>Scroll</p>
                        <p>Scroll</p>
                    </div>
                    <md-fab-toolbar md-direction="left" class="md-fab-bottom-right">
                        <md-fab-trigger class="align-with-text">
                            <md-button aria-label="menu" class="md-fab md-primary">
                                <md-icon>menu</md-icon>
                            </md-button>
                        </md-fab-trigger>
                        <md-toolbar>
                            <md-fab-actions class="md-toolbar-tools">
                                <md-button aria-label="comment" class="md-icon-button">
                                    <md-icon>magnify</md-icon>
                                </md-button>
                                <md-button aria-label="comment" class="md-icon-button">
                                    <md-icon>magnify</md-icon>
                                </md-button>
                                <md-button aria-label="comment" class="md-icon-button">
                                    <md-icon>magnify</md-icon>
                                </md-button>
                                <md-button aria-label="comment" class="md-icon-button">
                                    <md-icon>magnify</md-icon>
                                </md-button>
                                <md-button aria-label="comment" class="md-icon-button">
                                    <md-icon>magnify</md-icon>
                                </md-button>
                            </md-fab-actions>
                        </md-toolbar>
                    </md-fab-toolbar>
          </md-card-content>
        </md-card>

检查此codepen: http://codepen.io/marcusdacoregio/pen/ZpdQwa

我希望md-fab-toolbar跟随滚动而不是保持绝对位置。 我无法得到这种行为,你们可以帮助我吗?

1 个答案:

答案 0 :(得分:0)

这是你想要的吗? - CodePen

标记(相关)

<md-content layout="column">
    <md-card class="card-width">
        <md-toolbar class="md-hue-2" layout-align="center start" layout-padding>
            <span>{{cardName}}</span>
        </md-toolbar>
        <md-card-content layout="column">
            <div id="myList">

CSS

#myList {
  overflow: auto;
}