Question

我的模板中有一张bootStrap卡片，其骨架就像这样 -

＆＃13;

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

＆＃13;

＆＃13; 我希望在向下滚动卡块时将卡片头固定在顶部。我怎么能这样做？

据我所知，Bootstrap有一个用于在顶部修复导航栏的类。但我无法找到卡片头的任何内容。

编辑：我需要的解决方案不会影响卡块中的任何卡片（如果我添加任何卡片）。

Answer 1

您可以使用JavaScript Polyfill轻松地通过CSS完成此操作：

https://webdesign.tutsplus.com/tutorials/sticky-positioning-with-nothing-but-css--cms-24042

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

在顶部粘贴卡头

2 个答案: