在Bootstrap中滚动固定面板

Question

我有一个使用Bootstrap的固定面板标题，我在该面板下面有内容，应该在面板标题后滚动并消失在标题上方。

<div class="col-md-offset-3 col-md-6" style="padding-left: 0;padding-right: 0;position:fixed;z-index:100">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">
    my panel
    </h3>
    </div>
  </div>
</div>

初步观点：

滚动时：

我想要实现的目标：滚动的内容应该在主导航栏和面板标题之间消失（因此在面板上方）。

我创建了一个fiddle。

Answer 1

快速弄脏的解决方案是为你的导航元素添加一个与背景颜色相匹配的底部边框：

Fiddle

.navbar {
  border-bottom: 48px solid white; //body bkd color
}