Коллапс Bootstrap с фиксированным позиционированием

Question

У меня есть кнопка Bootstrap, которая при нажатии вызывает div, который начинается с верхней части страницы. Это улучшенное меню поиска. Этот div имеет верхнюю панель (уточнить заголовок), которую я бы хотел зафиксировать, даже если пользователь прокручивается вниз. Остальная часть этого div (меню уточнения) должна быть прокручиваемой, но в ТОП-ВЕРХЕ фактической веб-страницы. Прямо сейчас меню уточнения сливается со страницей. Если я прокручу страницу вверх, меню уточнения подталкивается под заголовком уточнения.

На следующем рисунке вы можете видеть, что оно начинается нормально, как на левом рисунке. Но когда я перемещаю страницу вверх, меню - заголовок под заголовком уточнения, как в правильном изображении.

Вот Bootply. Как вы можете видеть, когда вы прокручиваете весь путь вниз и нажимаете кнопку триггера, вы даже не видите меню уточнения, пока не прокрутите весь путь!

Кроме того, здесь соответствующий код для этой части моего интерфейса:

#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

Проблема заключается в том, что в то время как ваш заголовок position:fixed, содержание аккордеон все еще в контейнере, который position:absolute. Вы можете решить эту проблему, только изменяя position значения в паре ваших блоков объявления стиля:

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

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

EDIT: Для того, чтобы разрешить аккордеона элементы для прокручивать, когда вертикальное пространство экрана недостаточно, чтобы отобразить их все, вы» буду также необходимо добавить следующие стили #refine-accordion:

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

Вот updated Bootply. Надеюсь это поможет! Дайте знать, если у вас появятся вопросы.