侧边栏的切换按钮

Question

我有一个右侧边栏。我正在使用字体真棒左角图标来显示/隐藏边栏。单击切换按钮侧栏将内容与按钮一起向左推，然后按钮（字体真棒左角）旋转 180 度变成（字体真棒右角）作为动画。到这里为止一切正常。但是当我滚动页面时，切换按钮也会垂直滚动。

在这里，我不希望切换按钮每次都垂直滚动。 我尝试了位置：固定在 css 中，垂直滚动停止但侧边栏没有水平按下切换按钮。侧栏与切换按钮重叠（仅在 Firefox 中）。

在 chrome 中它工作正常。垂直滚动停止并且侧边栏将内容推到左侧，但这在 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： o/p in Firefox o/p in Chrome

Answer 1

切换效果的描述和示例演示..

Demo

HTML

<div class="toggle-button">
    <button></button>
</div>

CSS

.toggle-button { background-color: white; margin: 5px 0; border-radius: 20px; border: 2px solid #D0D0D0; height: 24px; cursor: pointer; width: 50px; position: relative; display: inline-block; user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; }
.toggle-button button { cursor: pointer; outline: 0; display:block; position: absolute; left: 0; top: 0; border-radius: 100%; width: 30px; height: 30px; background-color: white; float: left; margin: -3px 0 0 -3px; border: 2px solid #D0D0D0; transition: left 0.3s; }
.toggle-button-selected { background-color: #83B152; border: 2px solid #7DA652; }
.toggle-button-selected button { left: 26px; top: 0; margin: 0; border: none; width: 24px; height: 24px; box-shadow: 0 0 4px rgba(0,0,0,0.1); }

Javascript

$(document).on('click', '.toggle-button', function() {
$(this).toggleClass('toggle-button-selected'); 
});