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

Question

У меня есть страница, на которой изображение уменьшается при прокрутке.Как только он достигает определенного размера, появляется другое изображение.С этого момента поведение прокрутки должно быть таким же, как в способах прокрутки.

Моя проблема сейчас заключается в том, что все последующие div не «ждут» этого события изменения изображения.Я могу только сказать первому последующему div остановиться, пока не произойдет это событие, и изменить его position на relative, как только оно произойдет.Но с этим решением оно кажется более запутанным.

Вот JSFiddle с примером настройки. Мне бы хотелось, чтобы ни один из текстовых div не двигался, пока не появится красный div.И тогда он должен начать двигаться из своей текущей позиции.

Answer 1

Я мог бы решить проблему самостоятельно (каким-то образом).

Я добавил контейнер div для всего содержимого после div с изображениями и сделал его opacity: hidden.Во время прокрутки контент фактически прокручивается вверх, но его не видно.Как только изображения меняются, я добавляю margin-top в контейнер содержимого со значением прокручиваемого расстояния (+ некоторый буфер) и удаляю класс opacity: hidden.

Вот JSFiddle

Однако это не решение, описанное в вопросе, где контент должен быть виден и «ждать» на своей позиции, но для моих обстоятельств это приемлемый ответ.Но я не сделаю это принятым ответом на мой вопрос.