Question

我有一个标题，子标题和一个可在我的应用程序中垂直滚动的长信息列表。目前，当向上滚动时，信息列表隐藏在标题后面，但它会超过子标题。

我已经尝试将子标题更改为绝对定位，并且我已经尝试将z-index添加到可滚动的div和子标题，但两者都没有用。我也尝试将子标题放在ion-content中，但随后它也会滚动显示列表信息。

如何让滚动内容落在标题和子标题后面？

如果需要，可以提供其他信息。

HTML

<ion-view hide-nav-bar="false">

  <div class="sub-header">
    <span class="name">{{ user.name }}</span>
  </div>

  <ion-content has-header="true">
    <div class="messages">
      <div class="message" ng-repeat="msg in messages">
        <div>{{ msg.date }}</div>
        <div>{{ msg.text }}</div>
        <hr ng-show="!$last"/>
      </div>
    </div>
  </ion-content>

</ion-view>

Answer 1

我通过在子标题中添加以下样式来实现我想要的目标：

.sub-header {
  background-color: #fff;
  position: relative;
  top: 50px;
  z-index: 1;
}

诀窍是添加background-color: #fff。

如何在我的标题和子标题后面创建一个可滚动的div？

1 个答案: