固定配置によるブートストラップコラプス

Question

クリックすると、ページ上部から始まるdivが表示されます。洗練された検索メニューです。このdivには、ユーザーがスクロールしても固定したいと思うバーがあります（ヘッダーを修正）。そのdivの残りの部分（メニューを絞り込む）は、実際のWebページの上にスクロール可能である必要があります。今すぐ、精緻化メニューがページにマージされます。ページを上にスクロールすると、リファインメニューの下にリファインメニューが表示されます。

次の画像では、左の画像のように表示されています。しかし、私がページを上に動かすと、メニューは右の写真のように精製ヘッダーの下のヘッダになります。ここで

は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あるコンテナ内で残っているということです。 「、縦画面スペースはそれらすべてを表示するには不十分であるとき、アコーディオンのアイテムが通過スクロールできるようにすることができ：

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

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

EDIT：あなたは自分のスタイル宣言ブロックのカップルでposition値を変更することで、この問題を解決することができますまた#refine-accordionに次のスタイルを追加する必要があるでしょう：

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

ここupdated Bootplyです。お役に立てれば！ご質問がある場合はお知らせください。