应用position:fixed时是否可以保持父元素的宽度? [英] Is it possible to keep the width of the parent element when position: fixed is applied?

问题描述

当我们将position:fixed应用于元素时，它会从正常流程中 /a>，因此不尊重父元素的宽度. 有没有办法使它继承父级的宽度(如果声明为百分比)? (下面的工作用例)

When we apply position:fixed to an element, it's taken out of the normal flow of the document, therefore it doesn't respect it's parent's element width. Are there ways to make it inherit it's parent's width if this is declared as a percentage ? (working use case below)

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>

推荐答案

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

This is an interesting challenge. To approach this, we should first understand what fixed actually does.

与absolute不同，fixed 不会将自己定位于其最接近的亲戚.而是fixed 相对于视口定位自身.视口将始终保持固定，这就是为什么获得效果的原因.

Unlike absolute, fixed doesn't position itself from its closest relative parent. Instead, fixed positions itself relative to the viewport. The viewport will always stay fixed, which is why you get the effect that you do.

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

That being said, whenever you "inherit" any width it will be respective to the viewport. So it does us no good when we're trying set the width of our target element to the width of it's parent.

详细了解位置.

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

There are two approaches to fix this.

我们可以使用纯CSS 来解决此问题，但是我们需要提前知道宽度.假设其父元素为300px;

We can use pure CSS to fix this problem, but we would need to know the width in advance. Suppose that its parent element is 300px;

.parent{
    width: 300px;
}

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

JS

现在有了移动设备，我们没有确实拥有具有设置宽度的奢侈功能，尤其是300px上的所有内容.使用百分比也不起作用，因为它将相对于视口而不是父元素. 我们可以使用JS ，在这种情况下，我们可以使用jQuery 来实现此目的.让我们看一下功能，该功能将始终在给定时刻设置宽度:

JS

Now with mobile devices, we don't really have the luxury of having set widths, especially anything over 300px. Using percentages won't work either, since it will be relative to the viewport and not the parent element. We can use JS, in this case with jQuery to achieve this. Lets take a look at a function that will always set the width of the parent at the given moment:

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

css:

.fixed{
    position:fixed;
}

在CodePen

这很好并且很花哨，但是如果窗口的宽度改变了，而当用户仍然在页面上时，会发生什么变化呢?虽然父级可以调整其宽度，但子级将保持该功能所设置的宽度. 我们可以使用 jQuery的 resize() 事件侦听器来解决此问题.首先，我们需要将我们创建的函数分成两个部分:

That's fine and dandy, but what happens if the width of the window changes while the user is still on the page, changing the parent element with this? While the parent may adjust its width, the child will stay the set width that the function set it. We can fix this with jQuery's resize() event listener. First we'll need to split the function we created into two:

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

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

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

Now that we've separated each part, we can call them individually, we'll include our original button method that toggles the fixed and width:

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

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

And now we also add the resize event listener to the window:

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

在 CodePen

那里！现在我们有了一个固定的元素，该元素的大小将在调整窗口大小时进行调整.

There! Now we have a fixed element who's size will be adjusted when the window is resized.

我们已经通过理解fixed的位置及其局限性解决了这一挑战.与Absolute不同，fixed仅与视口相关，因此不能继承其父对象的宽度.

We've tackled this challenge by understanding fixed position and it's limitations. Unlike Absolute, fixed only relates to the view port and therefore cannot inherit its parent's width.

要解决此问题，我们需要使用一些JS魔术来实现这一目标，而jQuery并不需要很多jQuery魔术.

To solve this, we need to use some JS magic, which didn't take very much with jQuery, to achieve this.

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

In some cases, we need a dynamic approach with scaling devices of varying widths. Again, we took the JS approach.

这篇关于应用position:fixed时是否可以保持父元素的宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！