Почему изменяется ширина вложенного блока с position:fixed

Question

У родительского div с position: relative есть дочерний блок (class="floating") с формой, который при прокрутке страницы на определенную высоту фиксируется в определенном положении. Это достигается на jQuery добавлением блоку класса fixed при прокрутке страницы более, чем на 850px.

Однако, почему-то при прокрутке/добавлении класса, у дочернего блока class="fixed" изменяется (уменьшается) ширина. Я не могу понять причину, и не знаю как это исправить. Подскажите, пожалуйста, что неправильно. Спасибо!

Вот мой код:

html:

    <div class="floating">
         <p>Отправить запрос</p>
         <br />
   <form>
       <input name="fio" placeholder="Ваше имя" /><br />
       <input name="phone" placeholder="Номер телефона" /><br />
       <textarea name = "message" placeholder="Заявка"  type="text" cols="20" rows="5"  ></textarea><br />
       <textarea class="selected" type="text" cols="20" rows="5" style="display:none" ></textarea>  
   </form>
<p id="rez"></p>
<button style="font: bold 12px Tahoma; font-weight: 900;">Добавить в ЛК</button>&nbsp;&nbsp;<button style="font: bold 12px Tahoma; font-weight: 900;">Отправить заявку</button>
  </div>

css:

 .floating {
 background: #C9D1C7;
 color: #000000;
 font: bold normal 18px Tahoma;
 padding: 10px;    
 width:inherit;

}
.fixed {
 position: fixed;
 top: 10px; 
 z-index: 9999; 
 width:inherit;
 padding: 10px; 
}

И js, добавляющий класс при прокрутке:

$(function(){
  $(window).scroll(function() {
  var top = $(document).scrollTop();
  if (top > 850) $('.floating').addClass('fixed'); //850 - это значение высоты прокрутки страницы для добавления класса
  else $('.floating').removeClass('fixed');
  });
 });

Вот так выглядит форма до добавления класса:

А вот так после прокрутки:

Answer 1

Согласно приведенному вами коду: установить для .fixed : left: 10px и right: 10px.

Согласно картинке и вероятнее всего это так: установить для .fixed : width: Npx или min-width: Npx (в зависимости от вашей верстки), где N - это ширина правой колонки за вычетом всех необходимых отступов. При необходимости добавить right: Npx, где N - это отступ от правого края.

$(function() {
  $(window).scroll(function() {
    var top = $(document).scrollTop();
    if (top > 850) $('.floating').addClass('fixed'); //850 - это значение высоты прокрутки страницы для добавления класса
    else $('.floating').removeClass('fixed');
  });
});

body {
  height: 2500px;
}

.floating {
  background: #C9D1C7;
  color: #000000;
  font: bold normal 18px Tahoma;
  padding: 10px;
  width: inherit;
}

.fixed {
  position: fixed;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 9999;
  width: inherit;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="floating">
  <p>Отправить запрос</p>
  <br />
  <form>
    <input name="fio" placeholder="Ваше имя" /><br />
    <input name="phone" placeholder="Номер телефона" /><br />
    <textarea name="message" placeholder="Заявка" type="text" cols="20" rows="5"></textarea><br />
    <textarea class="selected" type="text" cols="20" rows="5" style="display:none"></textarea>
  </form>
  <p id="rez"></p>
  <button style="font: bold 12px Tahoma; font-weight: 900;">Добавить в ЛК</button>&nbsp;&nbsp;<button style="font: bold 12px Tahoma; font-weight: 900;">Отправить заявку</button>
</div>

БЛОГ НА HUSL

Почему изменяется ширина вложенного блока с position:fixed

Ответы (1 шт):