隐藏固定透明标头引导下的滚动内容

Question

我见过类似的q，但解决方案无法正常工作，因为我正在使用bootstrap。我的页面正文是垂直运行的两种颜色的渐变。标题是固定的，应该采用渐变的相应颜色。因此我把它变得透明。我想隐藏标题下的所有元素。

HTML

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" >
<div class="container">
  <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
  <h1 id="home-h1"><a href="index.html">title</a></h1>

  </div>
  <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">navitem</a></li>
      <li><a href="#navitem">navitem</a></li>
    </ul>
  </div><!--/.nav-collapse -->
</div>

CSS

 body {

    background: -webkit-linear-gradient(#99DAD2, #FEECA4);
    background: linear-gradient(#99DAD2, #FEECA4);
}

 .navbar-default {
    /* navbar background color */
    background-color:transparent;
}