javascript - 在屏幕外切换 div 进出

Question

我正在使用下面的代码将一个 div 部分切换出屏幕，然后完全切换回屏幕。此代码告诉“侧边栏”要移出屏幕多远。但在我的例子中，由于媒体查询应用于侧边栏宽度，此功能存在问题。因此，我需要的代码不是说明侧边栏将移动多远，而是说明屏幕上将保留多少侧边栏(以像素为单位)。 The demo here (与媒体查询)。

$(document).ready(function () {
    $("#toggle").click(function () {
      if($(this).hasClass('active')){
        $(this).removeClass('active');
        $("#sidebar").animate({
          left: '0%'
        });
      } else {
        $(this).addClass('active');
        $("#sidebar").animate({
          left: '-55%'
        });
      }
  });
});

Answer 1

简单的数学:

假设您希望边栏在屏幕上保留 40px，其余部分隐藏。所以你想将它向左移动 (width - 40)。即

 $(document).ready(function () {
        $("#toggle").click(function () {
            if($(this).hasClass('active')){
                $(this).removeClass('active');
                $("#sidebar").animate({
                    left: '0%'
            });
        } else {
            $(this).addClass('active');
            $("#sidebar").animate({
                left: - ($("#sidebar").width() - 40)
            });
        }
    });
});

html, body {
    width:100%;
    height: 100%;
}
#header {
    width: 100%;
    height: 20%;
    float: left;
    border: 1px solid;
}

#sidebar {
    width: 70%;
    height: 80%;
    position: relative;
    border: 1px solid;
}
#toggle {
    width: 10%;
    height: 40%;
    margin-right: 6.5%;
    margin-top: 3.5%;
    float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">SIDEBAR<input type="button" value="Toggle" id="toggle"></div>