Bootstrap collapse with fixed positioning
<p>I have a Bootstrap button that, when clicked, brings up a div that starts from the top of the page. It's a refine search menu. This div has a bar on top (refine header) that I'd like to keep fixed even though the user scrolls down. The rest of that div (refine menu) should be scrollable yet be ON TOP of the actual web page. Right now, the refine menu is merged with the page. If I scroll the page up, the refine menu tucks underneath the refine header. </p>

<p>In the following picture you can see it starts off ok as in the left picture. But when I move the page up, the menu is header beneath the refine header as in the right picture.</p>

<p><a href="https://i.stack.imgur.com/n2Gvf.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n2Gvf.jpg" alt="enter image description here"></a></p>

<p>Here is a <a href="http://www.bootply.com/M3aMzQ0bnf" rel="nofollow noreferrer">Bootply</a>. As you can see, when you scroll all the way down and click the trigger button, you don't even see the refine menu until you scroll all the way up!</p>

<p>Also, here is the relevant code for this part of my interface:</p>

<pre class="lang-css prettyprint-override"><code>#mobile-filter-trigger {
  margin-bottom: 10px;
  padding: 10px 12px;
}
#refine-header {
  position: fixed;
  top: 0;
  z-index: 10000;
  background-color: #27402a;
  color: #fff;
  padding: 6px 15px;
}
#refine-header .btn-default {
  width: 50%;
}
#refine-header &gt; .row &gt; div:first-child {
  padding-top: 7px;
}
#refine-mobile.collapsing {
  z-index: 10000;
  width: 100%;
  background-color: #ffffff;
}
#refine-mobile.collapse.in {
  display: block;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
}
#refine-accordion .panel-heading {
  padding: 10px 10px;
  background-color: #ffffff;
  border-radius: 0;
}
#refine-accordion .panel+.panel {
  margin-top: 0;
  border-top: none;
}
#refine-accordion .panel {
  border-radius: 0;
}
#refine-accordion .list-unstyled {
  margin-bottom: 0;
}
#refine-accordion .list-unstyled li+li {
  margin-top: 8px;
}
#refine-accordion {
  margin: 45px -15px 0 -15px;
}
#refine-mobile {
  border-bottom: 1px solid #ccc;
  background-color: #ffffff;
  padding: 0;
  border-top: 1px solid #ccc;
  box-shadow: 0 4px 4px -2px #828181;
  -moz-box-shadow: 0 4px 4px -2px #828181;
  -webkit-box-shadow: 0 4px 4px -2px #828181;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000000;
}
#refine-accordion .panel-title a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
}
</code></pre>

<pre class="lang-html prettyprint-override"><code>&lt;div id="mobile-filters"&gt;
  &lt;!--Mobile Filters --&gt;
  &lt;div class="col-xs-12 no-side-padding"&gt;
    &lt;a id="mobile-filter-trigger" role="button" class="btn btn-block btn-default" data-toggle="collapse" href="#refine-mobile"&gt;Filter by&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="collapse" id="refine-mobile"&gt;
    &lt;div id="refine-header" class="col-xs-12"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-xs-3"&gt;
          &lt;strong&gt;FILTER:&lt;/strong&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-7 text-right"&gt;
          &lt;a href="#" class="btn link" style="color:#fff; text-decoration:underline"&gt;Clear&lt;/a&gt;
          &lt;a href="#" class="btn btn-default"&gt;Apply&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="col-xs-2 text-right"&gt;
          &lt;button type="button" class="btn btn-link" data-toggle="collapse" data-target="#refine-mobile" style="font-size:150%; padding:0; color:#fff;"&gt;&lt;i class="ion-close-round"&gt;&lt;/i&gt;
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-12"&gt;
      &lt;div class="panel-group" id="refine-accordion" role="tablist" aria-multiselectable="true"&gt;
        &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading" role="tab"&gt;
            &lt;div class="panel-title"&gt;
              &lt;a role="button" data-toggle="collapse" data-parent="#refine-accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="btn-block"&gt;
              Size
              &lt;span class="ion-plus"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="collapseOne" class="panel-collapse collapse" role="tabpanel"&gt;
            &lt;div class="panel-body"&gt;
              &lt;ul class="list-unstyled"&gt;
                &lt;!-- [Option list...] --&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- [Additional filters...] --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--/Mobile Filters --&gt;
&lt;/div&gt;
</code></pre>