Как сделать, чтобы при скроле один блок скролился, а другой оставался на месте?

Question

[kot98]

Есть два блока одинаковой высоты и ширины. Нужно, чтобы изначально первый был наложен на второй. При скролле первый должен скролиться и открывать второй блок (второй должен остаться на месте. первый открывается по типу занавеса). Как это реализовать или какие свойства нужно использовать?

.parent {
    &__first {
      width: 100%;
      height: 700px;
      background: lightblue;
    }
    &__secondt {
      width: 100%;
      height: 700px;
      background: gray;
    }
  }

Answer 1

[SVM]

pozition fixed+sticky
вариантов хватает,
я просто дал направление

Comments

[kot98]

SVM, Fixed применимо, если элемент должен всегда отображаться на странице по типу header-a при скролле. А этот блок у меня в середине страницы и после "окончательного" скролла они не должны оставаться.

[ProjectSoft]

kot98, так, исследовали fixed. Отлично. А что по поводу sticky?
Только помните, что для sticky у родителя должно быть relative, а у элемента с sticky должна быть указана точная позиция top например.