角度のついたスティッキーツールバー

角度のある素材のアプリでは、以下のようなツールバーがあります。角度のついたスティッキーツールバー

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

任意の提案を更新しましたか？

ありがとうございました

出典

2016-10-17 Rose18

[ウェブサイトのスティッキーヘッダーバーを作成する方法]（http://stackoverflow.com/questions/13212624/how-to-create-sticky-header-bar-for-a-website）の可能な複製 – Liam

この機能はありますか？ - 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の使用。

出典

2016-10-18 08:30:49

角度のついたスティッキーツールバー

答えて

関連する問題