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

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

jquery html css

Jquery 如何在Materialize中创建具有固定标题的集合,jquery,html,css,materialize,Jquery,Html,Css,Materialize,我正在尝试创建materialize集合的固定标头。我用position设置样式：修复了这个问题，使标题变小，并使集合的第一个元素位于标题下 .collection-header { position: fixed; } 这就是我得到的您可以从ul中删除标题，这将使样式更容易。请看下面的内容，希望对您有所帮助 HTML 伙计，我试试看。但我认为这并不能解决收藏规模的问题-header@BilalDjaghout没问题。你能再解释一下页眉大小的问题吗。因为在我看来所有的东西都一样大。您的

我正在尝试创建materialize集合的固定标头。我用position设置样式：修复了这个问题，使标题变小，并使集合的第一个元素位于标题下

.collection-header {
  position: fixed;
}

这就是我得到的

您可以从ul中删除标题，这将使样式更容易。请看下面的内容，希望对您有所帮助

HTML

伙计，我试试看。但我认为这并不能解决收藏规模的问题-header@BilalDjaghout没问题。你能再解释一下页眉大小的问题吗。因为在我看来所有的东西都一样大。您的意思是希望标题单元格的宽度与其他单元格的宽度相同吗？@BilalDjaghout如果是这样。。。您可以使用像这样的jQuery设置宽度，您的示例是有效的，但需要更多的调整，因为当我调整窗口大小时，底部边框保持相同的大小。看看这个解决方案@BilalDjaghout我刚刚注意到另一个问题。当您将鼠标悬停在标题上并尝试滚动时，它将不起作用。我将尝试另一种不使用jQuery的解决方案，我认为它会更整洁一些。我将从ul中删除标题，只使用css。我会更新我的答案。

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

.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;
}