Как скрыть элемент, и при этом иметь возможность переходить на него, а также иметь внутри что-то липкое?

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

Из MDN

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

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

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;
}

<button id="unhide">Unhide pads and pool</button>
<div id="pads_and_pool">
    <div id="pads">pads</div>
    <div>
      <div id="pool">pool</div>
    </div>
</div>

Вы можете прослушать переходное событие и удалить overflow: hidden;, когда элемент завершит переход по высоте:

let fill_btn = document.getElementById('unhide');
fill_btn.addEventListener('click', unhide_pads_and_pool);

function handleTransitionEnd(event) {
  event.target.style.overflow = 'visible';
  event.target.removeEventListener('transitionend', handleTransitionEnd);
}

function unhide_pads_and_pool() {
  let pads = document.getElementById('pads');
  let pads_and_pool = document.getElementById('pads_and_pool');
  pads_and_pool.addEventListener('transitionend', handleTransitionEnd);
  pads_and_pool.style.height = pads.offsetHeight + 'px'                
}

#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;
}

<button id="unhide">Unhide pads and pool</button>
<div id="pads_and_pool">
    <div id="pads">pads</div>
    <div id="pool">pool</div>
</div>