javascript - CSS JS 固定位置侧边栏

Question

我有 2 个 block - 一个位置固定，另一个紧挨着它。我希望固定 block 在单击按钮后增加长度，第二个 block 减小大小并再次单击所有内容以将其返回到原始状态。固定 block 将是侧边栏菜单，永久粘贴。

一切都应该以 100% 宽度发生。

怎么做，但重要的是固定 block 和后者的宽度应该以像素为单位指定，而不是百分比。

这是要做的吗？

jQuery(document).ready(function($) {
  jQuery(".btn").click(function() {
    var div1 = jQuery(".left");
    var div2 = jQuery(".right");

    if (div1.width() < 200) {
      div1.animate({
        width: "25%"
      }, {
        duration: 200,
        specialEasing: {
          width: "linear"
        }
      });

      div2.animate({
        width: "75%"
      }, {
        duration: 200,
        specialEasing: {
          width: "linear"
        }
      });
    } else {
      div1.animate({
        width: "5%"
      }, {
        duration: 200,
        specialEasing: {
          width: "linear"
        }
      });
      div2.animate({
        width: "95%"
      }, {
        duration: 200,
        specialEasing: {
          width: "linear"
        }
      });
    }
  });
});

.container {
  width: 100%;
  margin: 0 auto;
}

.left {
  float: left;
  position: fixed;
  width: 5%;
  height: 100%;
  background: pink;
  z-index: 5;
}

.right {
  float: right;
  position: relative;
  width: 95%;
  height: 300px;
  background: green;
}

.content {
  float: left;
  position: relative;
  width: 100%;
  height: 100px;
  background: silver;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="left">
    <input type="button" value="click" class="btn">
  </div>
  <div class="right">
    <div class="content"> abc </div>
  </div>
</div>

Answer 1

Everything should happen at 100% width.

... in pixels, not in percent.

你确定这不是相反的吗？尝试基于 % 而不是 px 或 rem 制作你的 css 更好(除非它需要在 中完成)像素)

无论如何，我修复了你的代码，但是在 % 中，如果需要的话，从现在开始你可以使用 px:

jQuery(document).ready(function($) {

  jQuery(".btn").click(function() {

    var leftDiv = jQuery(".left");
    var rightDiv = jQuery(".right");

    console.log("leftDiv width: " + leftDiv.width() +
      " - " + "rightDiv width: " + rightDiv.width())
      
    var minWidthForRight = $('.container').width() - 300;
    var maxWidthForRight = $('.container').width() - 100;

    if (leftDiv.width() < 200) {


      leftDiv.animate({
        width: "300px",
        
      }, {
        duration: 200,
        specialEasing: {
          width: "linear"
        }
      });

      rightDiv.animate({
        width: minWidthForRight
      }, {
        duration: 200,
        specialEasing: {
          width: "linear"
        }
      });

    } else {

      leftDiv.animate({
        width: "100px"
      }, {
        duration: 200,
        specialEasing: {
          width: "linear"
        }
      });

      rightDiv.animate({
        width: maxWidthForRight
      }, {
        duration: 200,
        specialEasing: {
          width: "linear"
        }
      });

    }

  });

});

.container {
  width: 100%;
  margin: 0 auto;
}

.left {
  float: left;
  position: fixed;
  width: 150px;
  height: 300px;
  background: pink;
  z-index: 5;
}

.right {
  float: right;
  position: relative;
  width: 95%;
  height: 300px;
  background: green;
  resize: horizontal;
}

.content {
  float: left;
  position: relative;
  width: 100%;
  height: 100px;
  background: silver;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

  <div class="left">
    <input type="button" value="click" class="btn">
  </div>

  <div class="right">
    <div class="content"> abc </div>
  </div>

</div>

编辑

是的，可以将左侧保留为 px，将左侧保留为 %，而不是 % 本身，而是根据屏幕分辨率以 px 计算。

基本上，您采用容器宽度并“消除”您在动画中指定的宽度:

var minWidthForRight = $('.container').width() - 300;

右侧为:300 + (100% - 300 ) 左侧为:100 + (100% - 100 )