Javascript 侧边栏的切换按钮

我有一个右侧边栏。我使用字体可怕的角度左侧图标来显示/隐藏边栏。单击“切换按钮”侧栏将内容与按钮一起向左推，然后按钮（字体可怕的左角度）旋转180度，成为动画（字体可怕的右角度）。在这里之前，一切都很顺利。但当我滚动页面时，切换按钮也会垂直滚动

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

在chrome中，垂直滚动被停止&侧边栏将内容推到左侧，但在firefox中不会发生这种情况

css:

.container{
位置：相对位置；
身高：100%；
宽度：100%；
右：0；
-webkit过渡：右1 S易入易出；
-moz转换：右1s易入易出；
-ms转换：右1s轻松输入输出；
-o型过渡：右1s缓进缓出；
过渡：右1s缓进缓出；
}
.container.open-sidebar{
右：240px；
}
#边栏{
位置：绝对位置；
右：-240px；
背景色：rgba（0,0,0,0.3）；
宽度：240px；
身高：100%；
}
.内容{
宽度：100%；
身高：100%；
填充：10px；
位置：相对位置；
左侧填充：50px；
}
.content#侧边栏切换{
背景：透明；
颜色：白色；
不透明度：0.5；
边界半径：1px；
显示：块；
位置：相对位置；
填充：30px 7px；
浮动：对；
}
.挂件{
线高：600px；
颜色：白色；
不透明度：0.5；
位置：固定；
}
.轮换{
-moz过渡：所有0.5s线性；
-webkit过渡：所有0.5s线性；
过渡：所有0.5s线性；
}
.侧{
-moz变换：旋转（180度）；
-webkit变换：旋转（180度）；
变换：旋转（180度）；
}

html:

这是我的订单：

---

切换效果的说明和示例演示

HTML

Javascript

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

---

你能用这样的方式重现这个问题吗？这是JSFiddle@gaynorvader..你能在qtn中找到图像吗…我有类似的东西…但我想在侧边栏出现在屏幕上时将该按钮按到左侧..我有一个用于右侧侧边栏的按钮（字体左双角）但问题是当侧边栏打开时，按钮应该随之移动，当我们关闭侧边栏时，它应该返回到firefox中没有的初始位置。但它在铬合金中工作良好。请看qtn@sirajshaikh中的o/p图像

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

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