Можно ли сохранить ширину родительского элемента в позиции: фиксировано?

Когда мы применяем 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="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css'; return false;" 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>

Ответ 1

Вы можете использовать width:inherit. Это заставит его слушать родителя. Я тестирую его, и он работает в Firefox.

Ответ 2

Ширина изменяется, потому что объект, когда статический получает свою процентную ширину от своего родителя. Как только вы установите объект на фиксированный, он больше не течет и не изменяет размер.

Вам нужно будет установить размер в свое навигационное меню самостоятельно и не ожидать, что элемент получит свою ширину от родителя.

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

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

Ответ 3

Это интересная задача. Чтобы приблизиться к этому, мы должны сначала понять, что на самом деле делает fixed.

Понять Fixed

В отличие от absolute, fixed не позиционируется из своего ближайшего родственника. Вместо этого fixed позиционирует себя относительно окна просмотра. Видовой экран всегда остается фиксированным, поэтому вы получаете эффект, который вы делаете.

При этом всякий раз, когда вы "наследуете" любую ширину, это будет соответствовать файлу просмотра. Поэтому нам нехорошо, когда мы пытаемся установить ширину нашего целевого элемента в ширину его родительского.

Подробнее о различных поведении позиции.

Quick Solutions

Есть два способа исправить это.

Чистый 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();
     });

И теперь мы также добавляем в окно прослушиватель событий изменения размера:

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

Просмотр в CodePen

Там! Теперь у нас есть фиксированный элемент, размер которого будет изменен при изменении размера окна.

Заключение

Мы решили эту задачу, поняв позицию fixed и ее ограничения. В отличие от Absolute, fixed относится только к порту представления и поэтому не может наследовать его родительскую ширину.

Чтобы решить эту проблему, нам нужно использовать некоторую магию JS, которая не очень сильно подходит для jQuery, чтобы достичь этого.

В некоторых случаях нам нужен динамический подход с масштабирующими устройствами различной ширины. Опять же, мы взяли подход JS.

Ответ 4

Привет, вы также можете использовать jquery для сохранения ширины. Например:

jQuery(function($) {
    function fixDiv() {
        var $cache = $('#your-element');
        var $width = $('#your-element').parent().width();
        if ($(window).scrollTop() > 100) {
            $cache.css({
                'position': 'fixed',
                'top': '10px',
                'width': $width
            });
        } else {
            $cache.css({
                'position': 'relative',
                'top': 'auto'
            });
        }
    }
    $(window).scroll(fixDiv);
    fixDiv();
 });

Ответ 5

Вероятно, это связано с некоторым положением по умолчанию или дополнением к элементу <html> или <body>. Когда он статический, он зависит от ширины <body> в то время, но когда он изменяется на position:fixed, он имеет размер относительно окна просмотра.

Таким образом, удаление этого по умолчанию margin/padding должно устранить проблему (по моему опыту body { margin:0; } исправляет ее), как и при изменении размера, когда он исправлен (например, width:calc(n% - 5px);).

Ответ 6

Обходной путь может быть: left:8px; right:0; width:18%; в CSS для навигатора. Не лучшее решение, хотя.

Ответ 7

Добавьте width:auto; к элементу с position:fixed;, чтобы его ширина была равна ширине его родительского элемента.