具有固定定位的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 */
}

编辑:当垂直屏幕空间不足以全部显示时,允许手风琴项目滚动,您还需要将以下样式添加到#refine-accordion:

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

这是一个更新的Bootply.希望这可以帮助!如果您有任何疑问,请告诉我.