css - 位置: fixed is applied?时是否可以保持父元素的宽度

Question

当我们将 position:fixed 应用于一个元素时，它被取为 out of the normal flow文档的宽度，因此它不考虑其父元素的宽度。有没有办法让它继承父级的宽度如果它被声明为百分比？ (下面的工作用例)

let widthis = $('.box').width();
$('.dimensions').text(`width is ${widthis}`);

$('button').on('click', function() {
  $('.box').toggleClass('fixed');
  let widthis = $('.box').width();
  $('.dimensions').text(`width is ${widthis}`);
});

.container {
  max-width: 500px;
  height: 1000px;
}

.box {
  background-color: lightgreen;
}

.fixed {
  position: fixed;
}

.col-1 {
  border: 1px solid red;
  float: left;
  width: 29%;
}

.col-2 {
  border: 1px solid pink;
  float: left;
  width: 69%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click this to toggle position fixed for the left column</button>
<div class="container">
  <div class="col-1">
    <div class="box">
      fixed content<br>
      <span class="dimensions"></span>
    </div>
    </div>
  
  <div class="col-2">
    some other content
    </div>
  </div>

Answer 1

这是一个有趣的挑战。要解决这个问题，我们首先应该了解 fixed 的实际作用。

理解固定

与 absolute 不同，fixed 不会将自己定位在其最近的亲属 父级。相反，fixed 相对于视口(viewport)定位自己。视口(viewport)将始终保持固定，这就是为什么你会得到你所做的效果。

也就是说，无论何时“继承”任何宽度，它都将与视口(viewport)相关。因此，当我们尝试将目标元素的宽度设置为其父元素的宽度时，这对我们没有好处。

详细了解 position 的不同行为.

快速解决方案

有两种方法可以解决这个问题。

纯CSS

我们可以使用纯CSS来解决这个问题，但是我们需要提前知道宽度。假设它的父元素是300px;

.parent{
    width: 300px;
}

.parent .fixed_child{
    position: fixed;
    width: 300px;
}

JS

现在有了移动设备，我们没有真正拥有设置宽度的奢侈，尤其是任何超过 300px 的东西。使用百分比也不起作用，因为它是相对于视口(viewport)而不是父元素的。 我们可以使用 JS，在本例中使用 jQuery 来实现这一点。让我们看一下函数，它总是在给定时刻设置父元素的宽度:

 function toggleFixed () {
      var parentwidth = $(".parent").width();      
      $(".child").toggleClass("fixed").width(parentwidth);        
  }

CSS:

.fixed{
    position:fixed;
}

在 CodePen 中查看

动态宽度

这很好，但是当用户仍在页面上时如果窗口的宽度发生变化会发生什么情况，从而改变父元素？虽然父级可以调整其宽度，但子级将保持函数设置的宽度。 我们可以用 jQuery's 解决这个问题resize() 事件监听器。首先，我们需要将创建的函数拆分为两个:

function toggleFixed() {
   adjustWidth();
   $(".child").toggleClass("fixed");
 }

 function adjustWidth() {
   var parentwidth = $(".parent").width();
   $(".child").width(parentwidth);
 }

现在我们已经分离了每个部分，我们可以单独调用它们，我们将包括我们原来的按钮方法来切换固定和宽度:

$("#fixer").click(
     function() {
       toggleFixed();
     });

现在我们还将调整大小事件监听器添加到窗口:

 $(window).resize(
     function() {
       adjustWidth();
     })

在 CodePen 中查看

那里!现在我们有了一个固定元素，它的大小会在调整窗口大小时调整。

结论

我们通过理解 fixed 位置及其局限性来应对这一挑战。与 Absolute 不同，fixed 仅与视口(viewport)相关，因此不能继承其父项的宽度。

为了解决这个问题，我们需要使用一些 JS 魔法，这对 jQuery 来说不是很重要。

在某些情况下，我们需要一种动态方法来缩放不同宽度的设备。同样，我们采用了 JS 方法。