粘滞头和引导程序

Question

后台：我正在使用Bootstraps网格系统，但有一个特定的列我想要创建一个粘性标题（请参阅第4行下面的<header>元素）当用户滚动时移动。

我看到的内容：标题未被其列父级包含，下一行隐藏在其后面。

问题：是否可以创建包含在父元素中的纯css粘性元素？

可以在此处找到代码示例： http://www.bootply.com/Q3Nnqw0yK9

.col-md-2, col-xs-2 {
  16.66666667%;
}
.col-md-8, col-xs-8 {
  width: 66.66666667%;
}
.row {
  margin-left: -15px;
  margin-right: -15px;
}
.child-header {
  height: 50px;
  border-bottom: 1px solid grey;
}
   
 .affix {
  position: fixed;
  width: 100%;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-2 col-xs-2"></div>
<div class="col-md-8 col-xs-8" id="main-region">
  <div class="card">
    <header class="child-header affix row">
      <div class="col-md-7">
        <h3 class="panel-title" style="line-height: 34px; color:#757575;">
                        Profile your Organization
                    </h3>
      </div>
      <div class="col-md-5 button-set" id="card-header-button-region" style="height:50px;">
        <button type="button" id="org_profile_next" class="btn btn-primary btn-raised pull-right" data-perm="8">
          <div class="ico-btn">
            <i class="material-icons navigate">navigate_before</i>
          </div>
        </button>
        <button type="button" id="org_profile_next" class="btn btn-primary btn-raised pull-right" data-perm="8">
          <div class="ico-btn">
            <i class="material-icons navigate">navigate_next</i>NEXT
          </div>
        </button>
      </div>
    </header>
  </div>
</div>
<div class="col-md-2 col-xs-2"></div>
</div>
<div class="row">
<div class="col-md-12">Hello World<br/>Hello World<br/>Hello World<br/>Hello World<br/>Hello World<br/>Hello World<br/>Hello World<br/>Hello World<br/>Hello World<br/>Hello World<br/>Hello World<br/>Hello World<br/>Hello World<br/>Hello World<br/>Hello World<br/></div>
</div>