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;
}

这是一个updated Bootply。希望这可以帮助！如果您有任何问题，请告诉我。

具有固定定位的Bootstrap折叠

1 个答案: