Question

我正在使用Angular-Material来做到这一点。您可以查看codepen here。正如您所看到的，我未能将副标题固定在主标题下方。我错过了什么？

这是HTML

<div ng-app="myApp">
  <header md-page-header>
    <div md-header-picture style="background-image:url(http://3.bp.blogspot.com/-8jk6pwVieck/TiDjWyDdWHI/AAAAAAAAAbQ/n22FFKf9bvs/s1600/259699_219094411455453_214219875276240_696700_4217591_o.jpg)"></div>
    <md-toolbar scroll>
      <div class="md-toolbar-tools">
        <md-button class="md-tools" aria-label="Go Back">
          <md-icon aria-label="keyboard_arrow_left" class="material-icons">keyboard_arrow_left</md-icon>
        </md-button>
        <h2 md-header-title flex>Sari Yanti</h2>
        <md-button class="md-tools" aria-label="Edit Contact"><md-icon aria-label="assistant Photo" class="material-icons">&#xE3A0;</md-icon></md-button>
        <md-button class="md-tools" aria-label="More"><md-icon aria-label="assistant Photo" class="material-icons">&#xE3E3;</md-icon></md-button>
      </div>
    </md-toolbar>
    <div class="main-fab">
      <md-button aria-label="Float Action Button" class="md-fab md-accent"><md-icon aria-label="airline_seat_recline_extra" class="material-icons">&#xE636;</md-icon></md-button>
    </div>
  </header>
  <md-content ng-controller="SubheaderAppCtrl" md-theme="altTheme">
    <section>
      <md-subheader class="md-primary">Unread Messages</md-subheader>
      <md-list layout-padding>
        <md-list-item class="md-3-line" ng-repeat="message in messages">
            <img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
            <div class="md-list-item-text">
              <h3>{{message.what}}</h3>
              <h4>{{message.who}}</h4>
              <p>
                {{message.notes}}
              </p>
            </div>
        </md-list-item>
      </md-list>
    </section>
    <section>
      <md-subheader class="md-warn">Late Messages</md-subheader>
      <md-list layout="column" layout-padding>
        <md-list-item class="md-3-line" ng-repeat="message in messages">
          <img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
          <div class="md-list-item-text">
            <h3>{{message.what}}</h3>
            <h4>{{message.who}}</h4>
            <p>
              {{message.notes}}
            </p>
          </div>
        </md-list-item>
      </md-list>
    </section>
    <section>
      <md-subheader>Read Messages</md-subheader>
      <md-list layout="column" layout-padding>
        <md-list-item class="md-3-line" ng-repeat="message in messages">
          <img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
          <div class="md-list-item-text">
            <h3>{{message.what}}</h3>
            <h4>{{message.who}}</h4>
            <p>
              {{message.notes}}
            </p>
          </div>
        </md-list-item>
      </md-list>
    </section>
    <section>
      <md-subheader class="md-accent">Archived messages</md-subheader>
      <md-list layout="column" layout-padding>
        <md-list-item class="md-3-line" ng-repeat="message in messages">
          <img ng-src="{{message.face}}" class="md-avatar" alt="{{message.who}}">
          <div class="md-list-item-text">
            <h3>{{message.what}}</h3>
            <h4>{{message.who}}</h4>
            <p>
              {{message.notes}}
            </p>
          </div>
        </md-list-item>
      </md-list>
    </section>
  </md-content>
  </div>

看起来这种角度材质仅针对移动设备。但我真的希望它也可以在网上使用

Answer 1

首先你的html中有额外的

<span class="ng-scope">Unread Messages</span></span>

其次，我认为当屏幕向上滚动时，图像标题会消失并显示工具栏，如果您想要＆＃34;未读消息＆＃34;在那个工具栏之后，把

<h2 class="md-primary md-subheader md-altTheme-theme" sticky-state="next">
  <div class="md-subheader-inner"><span class="md-subheader-content">
    <span class="ng-scope">Unread Messages</span>
  </div>
</h2>

在 md-toolbar-tools 中，有条件地显示它与显示工具栏的方式相同

我已经分叉并修改了你的代码，使用你在那里做的相同逻辑显示或隐藏子标题，CodePen在这里：http://codepen.io/zigmaempire/pen/doZzwe

在主标题下右侧固定子标题

1 个答案: