Continuar scroll utilizando position: sticky

Front-end CSS
,
#1

Estou fazendo uns testes para um projeto e utilizei “position: sticky;” em uma div, porém ao chegar no fim da mesma, o scroll não continua a não ser que eu mova o mouse. Alguém me da uma luz?

Segue o código e um vídeo abaixo.

<div class="sticky-effect">
    <img src="lw-sticky.png" alt="">
    <h1>Designed for Relability</h1>
</div>

  .sticky-effect {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #acb8be;
  }
  .sticky-effect img {
    position: sticky;
    top: 1px;
    align-self: start;
    display: flex;
    justify-content: flex-end;
    z-index: 0;
    width: 90vh;
  }

  .sticky-effect h1 {
    position: relative;
    top: 100%;
    left: 10vh;
    color: #000000;
    font-size: 60px;
    padding-top: 40vh;
  }

Vídeo: Document - Opera 2022-09-30 15-28-09.mp4 - Google Drive

#2

O elemento com position: sticky não vai se fixar no scroll se o seu elemento pai for menor que a largura do scroll. Basicamente, o elemento só vai acompanhar o scroll até o limite do elemento pai.

Usa o position: stick na classe .sticky-effect, ao inves da img dentro dela.

#3

Não consegui, infelizmente.
Estou tentando.

O problema é ele criar outra área scrollável ao invés de utilizar o scroll da página atual, nunca mexi com sticky e estou com esse problema.

Respondendo apenas para o post subir e fico no aguardo de uma solução. Obrigado.