当position:fixed应用时,是否可以保持父元素的宽度？

Question

当我们应用于position:fixed一个元素时,它被取出文档的正常流程,因此它不尊重它的父元素宽度.如果将其声明为百分比,是否有办法使其继承父级的宽度？(下面的工作用例)

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 相对于视口定位自己.视口将始终保持固定,这就是您获得效果的原因.

话虽这么说,每当你"继承"任何宽度时,它都将与视口相对应.因此,当我们尝试将目标元素的宽度设置为其父元素的宽度时,这对我们没有好处.

详细了解不同的职位行为.

快速解决方案

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

纯CSS

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

.parent{
    width: 300px;
}

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

JS

现在有了移动设备,我们并没有真正拥有设置宽度的奢侈品,特别是任何东西300px.使用百分比也不起作用,因为它将相对于视口而不是父元素.我们可以使用JS,在这种情况下使用jQuery来实现这一点.让我们来看看一个功能是将始终设置括号的宽度在给定时刻t:

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

CSS:

.fixed{
    position:fixed;
}

在CodePen中查看

动态宽度

这很好,花花公子,但如果窗口的宽度在用户仍在页面上时发生变化,用这个更改父元素会发生什么？当父级可以调整其宽度时,子级将保持函数设置它的设置宽度.我们可以使用jQuery的 resize()事件监听器来解决这个问题.首先,我们需要将我们创建的函数拆分为两个:

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

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

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

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

现在我们还将resize事件监听器添加到窗口:

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

在CodePen中查看

那里!现在我们有一个固定元素,当调整窗口大小时,将调整大小.

结论

我们通过了解fixed位置及其局限性来应对这一挑战.与Absolute不同,fixed仅与视口相关,因此无法继承其父级的宽度.

为了解决这个问题,我们需要使用一些JS魔法来实现这一点,它不需要花费很多jQuery.

在某些情况下,我们需要一种动态方法,可以扩展不同宽度的设备.我们再次采用JS方法.

Answer 2

你可以用width:inherit.这将使它听父母.我测试它,它适用于Firefox.

Answer 3

宽度正在改变,因为静态时的对象从其父级接收其百分比宽度.将对象设置为fixed后,它将不再处于流动状态并调整大小.

你必须自己设置导航菜单的大小,而不是指望元素从父级获得宽度.

.nav {
    position: fixed;
    width: 20%;
    border: 1px solid green;
    padding: 0px;
    list-style-type:none;
    background:lightblue;
}

http://tinker.io/3458e/5

Answer 4

正如有人已经建议的那样，使用纯 javascript （不带 jquery）：

const parentElement = document.querySelector('.parent-element');
const fixedElement = document.querySelector('.fixed-element');

window.addEventListener('load', changeFixedElementWidth);
window.addEventListener('resize', changeFixedElementWidth);

function changeFixedElementWidth() {
  const parentElementWidth = parentElement.getBoundingClientRect().width;
  fixedElement.style.width = parentElementWidth + 'px';
}