html - 在顶部粘贴卡头

Question

我的模板中有一个bootStrap卡片，它的骨架是这样的-

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-block">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  <a href="#" class="btn btn-primary">Go somewhere</a>
</div>

我想在向下滚动 card-block 时将 card-header 固定在顶部。我该怎么做？

据我所知，Bootstrap 有一个用于在顶部固定导航栏的类。但是我找不到card-header 的任何内容。

编辑: 我需要一个不会影响 card-block 内的任何卡片(如果我添加任何卡片)的解决方案。

Answer 1

你看起来像这样吗？ LiveOnFidde如果您有任何问题，请在评论中问我。

.card-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  background: #bbb;
  z-index: 2;
  height: 20px;
}

.card-block {
  margin-top: 20px;
  height: 100px;
  overflow: auto;
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="card">
  <div class="card-header">
Featured

  </div>
  <div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional contentWith supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.With supporting text below as a natural</p>
<p class="card-text">  lead-in to additional content.With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.With
  supporting text below as a natural lead-in to additional content..
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>