Css 带棱角材料的粘性工具条_Css_Angularjs_Angular Material

Css 带棱角材料的粘性工具条

css angularjs angular-material

Css 带棱角材料的粘性工具条,css,angularjs,angular-material,Css,Angularjs,Angular Material,在我的angular material应用程序中，我有如下工具栏 <md-toolbar class="md-primary"> <h2 class="md-toolbar-tools"> <span>Price Negotiation</span> <div class="tool-bar-icons"> <md-button class="md-icon-butt

在我的angular material应用程序中，我有如下工具栏

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

我试着添加，然后它被隐藏了。我想修正鼠标向下滚动时顶部的标题

已更新

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


主标题
副标题
{{propertyName}}

有什么建议吗

谢谢

这对你有用吗

标记（减少）


可能重复的
<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>

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