我有一个右边的边栏。我正在使用字体左角图标来显示/隐藏侧边栏。单击“切换按钮”侧栏可将内容与按钮一起向左推

这里我不想每次都垂直滚动切换按钮。I hv尝试位置：固定在css中，垂直滚动停止，但侧边栏没有水平推动切换按钮。侧栏在切换按钮上重叠（仅在firefox中）。

铬合金的工作正常。垂直滚动停止

CSS：

.container {
  position: relative;
  height: 100%;
  width: 100%;
  right: 0;
  -webkit-transition:  right 1s ease-in-out;
  -moz-transition:  right 1s ease-in-out;
  -ms-transition:  right 1s ease-in-out;
  -o-transition:  right 1s ease-in-out;
  transition: right 1s ease-in-out;
}

.container.open-sidebar {
  right: 240px;
}

#sidebar {
  position: absolute;
  right: -240px;
  background-color: rgba(0, 0, 0, 0.3);
  width: 240px;
  height: 100%;
}

.content {
  width: 100%;
  height: 100%;
  padding: 10px;
  position: relative;
  padding-left: 50px;
}

.content #sidebar-toggle {
  background: transparent;
  color: white;
  opacity: 0.5;
  border-radius: 1px;
  display: block;
  position: relative;
  padding: 30px 7px;
  float: right;
}

.padtop {
  line-height: 600px;
  color: white;
  opacity: 0.5;
  position: fixed;
}

.rotate {
  -moz-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

.rotate.side {
  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  transform:rotate(180deg);
}

HTML：

<div class="container">
  <div class="col-sm-1">
    <a href="#" data-toggle=".container" id="sidebar-toggle">
      <i class="fa fa-angle-double-left fa-5x padtop rotate"></i></a>
  </div>
</div>

这是我的o/p:Firefox中的o/p和Chrome中的o/p