Работа с USB-устройствами в Моно

Позиция sticky не будет работать, если у элемента есть родители (прямые / косвенные), у которых установлено свойство переполнения, отличное от значения по умолчанию (видимого).

Из MDN

Это значение всегда создает новый контекст стека. Обратите внимание, что липкий элемент «прилипает» к своему ближайшему предку, который имеет «механизм прокрутки» (создается, когда переполнение скрыто, прокрутка, авто или наложение), даже если этот предок не является ближайшим фактически прокручивающим предком Это эффективно подавляет любое «липкое» поведение (см. Проблему Github на W3C CSSWG).

blockquote>

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

let fill_btn = document.getElementById('unhide')
fill_btn.addEventListener('click', unhide_pads_and_pool)
                    
function unhide_pads_and_pool() {
  let pads = document.getElementById('pads')
  let pads_and_pool =           document.getElementById('pads_and_pool')  
  pads_and_pool.style.height = pads.offsetHeight + 'px';
  pads_and_pool.style.overflow = 'visible';              
}

#pads_and_pool {
  height: 0;
  overflow: hidden;
  background: grey;
  display: flex;
  justify-content: space-between;
  transition: height 2s;
}
#pads {
  height: 5000px;
  width: 500px;
  background: orange;
}
#pool {
  position: sticky;
  top: 0;
  height: 150px;
  width: 150px;
  background: powderblue;
}

Unhide pads and pool

    
pads
    

      
pool