Question

我有一个右侧边栏。我使用font awesome angle-left图标来显示/隐藏侧边栏。点击切换按钮侧栏将内容向左推，同时按钮＆amp;然后按钮（字体真棒左角）旋转180度成为（字体真棒直角）动画。它工作正常，直到这里。但是当我滚动页面时，切换按钮也会垂直滚动。

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

在Chrome中它的工作正常。垂直滚动停止＆amp;侧边栏将内容推送到左侧，但这不会发生在Firefox中。

的CSS：

public class NodeScreenshotTest extends Application
{
  public static void main(String[] args)
  {
    Application.launch(args);
  }

  @Override
  public void start(Stage stage)
  {
    stage.setScene(new Scene(createContent()));
    stage.getScene().setFill(Color.BEIGE);
    stage.setTitle(getClass().getSimpleName());
    stage.show();
  }

  private Parent createContent()
  {
    BorderPane content = new BorderPane();
    Rectangle rectangle = new Rectangle(50, 50);
    rectangle.setFill(Color.AQUA);    
    SnapshotParameters params = new SnapshotParameters();
    params.setFill(Color.YELLOW);
    // Viewport x/y negative???
    params.setViewport(new Rectangle2D(-15, -15, 80, 80));
    ImageView iv = new ImageView(rectangle.snapshot(params, null));
    content.setCenter(iv);
    return content;
  }
}

HTML：

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

这是我的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'); 
});

切换侧边栏按钮

1 个答案: