Имея абсолютный дочерний элемент, не обращайте внимания на то, что родители находятся в затруднительном положении

Question

Я пытаюсь сделать так, чтобы дочерний абсолютный элемент липкого родителя прокручивал вниз , а не (по сути, следуйте за родителями, придерживающимися правил).

Проблема в том, что элемент заголовка находится ниже элемента topbar. При открытии ящика без прокрутки он находится ниже верхней панели, что имеет смысл, поскольку абсолютное диктует, что оно следует за относительным положением родителя.

Я пытаюсь установить ящик на отметке top:0px (относительно фиксированного положения), в самой верхней части экрана, перекрывающей верхнюю панель. Перемещение элемента с top:0px на top:-20px не будет работать, поскольку содержимое ящика будет обрезано.

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

Вторым решением будет отсоединение выдвижного ящика от родителя, но ...

.. На самом деле это существенно более сложный заголовок / функциональность с одним слишком большим количеством связанных и движущихся частей (я не не сделай это). Это довольно деликатно, когда дело доходит до изменений из-за родительской / дочерней зависимости элементов, в противном случае создание ящика отдельным элементом было бы самым простым решением.

Вот небольшой пример того, как он функционирует на данный момент:

$("#toggle").click(function() {
  $("#drawer").toggle("open");
})

#wrapper {display:flex; flex-direction:column}
#topbar {
  background-color: red;
  height: 20px;
}

#header {
  position: sticky;
  z-index: 5;
  top:0;
  background-color: blue;
  height :40px;
}

#drawer {
position:absolute;
  height: 100vh;
  top:0px;
  right: 10px;
  background-color:yellow;
}
#page {
  height:900px;
}

.open {
  right:50vw;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div id="topbar">top bar</div>
  <div id="header">
    <div id="header_inner">
      <button id="toggle"> Drawer Toggle</button>
    </div>
    <div id="drawer" >
      Drawer Content
    </div>
  </div>

  <div id="page"> Page Content <div>

Answer 1

Установить ящик сверху: -20px; и добавьте слушателя прокрутки, чтобы проверить, нужно ли вам двигаться или нет. Если прокрутка меньше 20, рассчитайте разницу, чтобы установить top, в противном случае установите top на ноль.

Я добавил правило, чтобы избежать полей для HTML и BODY, потому что, если есть поля или отступы, вы нужно добавить их в расчет.

$(document).on( 'scroll', function(){
   let scroll = $(document).scrollTop();
   let diff = 20 - scroll;
   if(diff > 20) {
       $("#drawer").css('top', 0);
   } else if(diff >= 0) {
       $("#drawer").css('top', '-' + diff + 'px');
   }
});

$("#toggle").click(function() {
  $("#drawer").toggle("open");
});

html, body {
  margin:0;
  padding:0;
}

#wrapper {display:flex; flex-direction:column}
#topbar {
  background-color: red;
  height: 20px;
}

#header {
  position: sticky;
  z-index: 5;
  top:0;
  background-color: blue;
  height :40px;
}

#drawer {
position:absolute;
  height: 100vh;
  top:-20px;
  right: 10px;
  background-color:yellow;
}
#page {
  height:900px;
}

.open {
  right:50vw;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div id="topbar">top bar</div>
  <div id="header">
    <div id="header_inner">
      <button id="toggle"> Drawer Toggle</button>
    </div>
    <div id="drawer" >
      Drawer Content
    </div>
  </div>

  <div id="page"> Page Content <div>