在我的角度材料应用程序中,我有如下工具栏。
<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>
有什么建议吗?
谢谢
答案 0 :(得分:3)
这对你有用吗? - 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
打包您的内容。