Question

我试图创建一个固定的物化集合标题。我用它定位它：修复它使标题更小并使标题下方的集合的第一个元素。

.collection-header {
  position: fixed;
}

这是我得到的example

Answer 1

您可以完全删除ul中的标题，这样可以更容易设置样式。见下文，希望它有所帮助！

https://plnkr.co/edit/7xPQJNjmvn0qIQbSlmV2?p=preview

HTML

<html>

  <head>
    <script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="container">
        <div class="collection-header">
          <h4>First Names</h4>
        </div>
      <ul class="collection with-header">
        <li class="collection-item">Fisrt</li>
        <li class="collection-item">Second</li>
        <li class="collection-item">Third</li>
        <li class="collection-item">Fourth</li>
        <li class="collection-item">Fisrt</li>
        <li class="collection-item">Second</li>
        <li class="collection-item">Third</li>
        <li class="collection-item">Fourth</li>
        <li class="collection-item">Fisrt</li>
        <li class="collection-item">Second</li>
        <li class="collection-item">Third</li>
        <li class="collection-item">Fourth</li>
      </ul>
    </div>
  </body>

</html>

CSS

.collection {
    height: calc(100vh / 4) !important;
    overflow-y: auto;
    margin-top:0;
}

.collection-header {
    position: relative;
    border-left:1px solid #e0e0e0;
    border-top:1px solid #e0e0e0;
    border-right:1px solid #e0e0e0;
    padding-left:27px;
}
.collection-header h4 {
    margin-bottom: 0;
    padding-bottom: 12px;
}

如何在Materialize中创建具有固定标题的集合

1 个答案: