Question

在我的角度材料应用程序中，我有如下工具栏。

<md-toolbar class="md-primary">
    <h2 class="md-toolbar-tools">
        <span>Price Negotiation</span>
        <div class="tool-bar-icons">
            <md-button class="md-icon-button" aria-label="Home">
                <md-tooltip md-direction="bottom">
                    Home
                </md-tooltip>
                <md-icon>home</md-icon>
            </md-button>

            <md-button class="md-icon-button" aria-label="Settings">
                <md-icon>settings</md-icon>
                <md-tooltip md-direction="bottom">
                    Settings
                </md-tooltip>
            </md-button>

            <md-button class="md-icon-button" aria-label="More">
                <md-icon>more_vert</md-icon>
                <md-tooltip md-direction="bottom">
                    Menu
                </md-tooltip>
            </md-button>
        </div>
    </h2>
</md-toolbar>

<div class="headline">
    <div class="price-details">
        <span class="property-name">{{propertyName}}
                    </span>
        <span class="item_price" ng-click="kill_agent()">
            <h3 class="old-price"><i class="price-unit">{{displayUnit}}</i><i class="price-val">{{firstDisplayPrice}}</i></h3>
            <h2 class="new-price"><i class="new-price"><i
                    class="price-unit">{{displayUnit}}</i>{{displayPrice}}</i></h2>
        </span>
    </div>
</div>

CSS

md-toolbar {
    box-shadow: 0 1px 4px #333;
    background-color: #303F9F;
}

.tool-bar-icons {
    position: absolute;
    right: 3%;
    top: 12%;
}

.headline {
    background: #00a;
    color: #fff;
    height: 60px;
    line-height: 40px;
    letter-spacing: 1px;
    display: flex;
}

我尝试添加然后隐藏了。当鼠标向下滚动时，我想将标题固定在顶部。

已更新

<body ng-app="TestApp">
  <div layout="column"  flex="">
    <md-toolbar style="position: fixed;">
      <h2 class="md-toolbar-tools">
        <span>Main Title</span>

    </h2>
    </md-toolbar>

    <div class="headline">Sub Title
    </div>
</div>

    <md-content ng-controller="mainCtrl" layout="row" flex="">
      <div layout="column">
             <h1>{{propertyName}}</h1>
      </div>

    </md-content>
</body>

有什么建议吗？

谢谢

Answer 1

这对你有用吗？ - CodePen

标记（减少）

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="column">
    <md-toolbar class="md-primary"></md-toolbar>
    <md-content>
        <!-- lots of content -->
    </<md-content>
</div>

请注意使用md-content打包您的内容。

粘性工具栏与角材料

1 个答案: