Рубрики
Без рубрики

Наследуйте ширину родительского элемента, когда `position: fixed` применены

Быстрый учебник, который поможет вам понять свойство позиции при применении фиксированного значения. Tagged с CSS, DOM, JavaScript, jQuery.

Ранее в этом году я наткнулся на вопрос о SOF, спрашивающем, как может быть дочерний элемент, который является Исправлено Унаследовать ширину своего родителя. Я был шокирован, увидев решение, которое предложило использовать наследуя Был поднят голос несколько раз! Это не правильное решение. Поэтому я написал несколько техническую статью о том, как ее подойти. Вот сделанная версия этого ответа.

Правда в том, что вы не можете использовать наследуя надежно установить ширину детского элемента, пока он фиксирован. Это связано с недоразумением или отсутствием понимания того, как Исправлено на самом деле работает.

Понять фиксированное

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

Это, как сказано, Всякий раз, когда вы «наследуете» любую ширину, она будет соответствует видовому доку Анкет Так что это не приносит нам пользы, когда мы пытаемся установить ширину нашего целевого элемента по ширине его родителя.

Узнайте больше о различных поведениях должность .

Быстрые решения

Теперь, когда мы лучше понимаем Исправлено , вот два подхода, чтобы это произошло

Чистый CSS

Мы можем использовать Чистый CSS Чтобы решить эту проблему, но Нам нужно знать ширину заранее Анкет Предположим, что его родительский элемент 300px;

.parent{
    width: 300px;
}

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

JS

Теперь с мобильные устройства , мы Не Действительно есть роскошь иметь Установить ширину , особенно что угодно, более чем 300px Анкет Использование процентов также не будет работать, так как он будет относительно видоубийта, а не родительского элемента. Мы можем использовать JS , в этом случае С jQuery для достижения этого Анкет Давайте посмотрим на функция это всегда будет устанавливать ширину парена т в данный момент:

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

CSS:

.fixed{
    position:fixed;
}

Посмотреть в Кодепен

Динамическая ширина

Это нормально и денди, но что происходит Если ширина окна меняется Пока пользователь все еще находится на странице, изменив родительский элемент с этим? В то время как родитель может отрегулировать свою ширину, ребенок останется на установленной ширине, которую функция установила. Мы можем исправить это с помощью jQuery’s 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();
     })

Посмотреть в Кодепен

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

Вывод

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

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

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

Оригинал: “https://dev.to/phillt/inherit-the-width-of-the-parent-element-when-position-fixed-is-applied”

Читайте ещё по теме: