Bootstrap collapse with fixed positioning

Question

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.

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.

Here is a Bootply. 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!

Also, here is the relevant code for this part of my interface:

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

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

Answer 1

The problem is that while your header is position:fixed, the accordion contents are still within a container that is position:absolute. You can solve this problem by just changing the position values in a couple of your style declaration blocks:

#refine-mobile {
    position: fixed; /* from absolute */
}

#refine-header {
    position: absolute; /* from fixed */
}

EDIT: To allow accordion items to be scrolled through when vertical screen space is insufficient to display them all, you'll also need to add the following styles to #refine-accordion:

#refine-accordion {
    max-height: calc(100vh - 45px); /* The 45px is not random, it's the margin-top */
    overflow-y: auto;
}

Here's an updated Bootply. Hope this helps! Let me know if you have any questions.