Как сделать плавающий блок?

Question

[FrontendNooob]

есть три секции, нужно что б блок который находиться в первой секции(который на весь экран) переходил во вторую (50%) и перед третьей секцией останавливался, учитывая тот факт что контент постоянно меняется

Пример как должно быть
https://codepen.io/MarryPorn/pen/PomLyVj

Answer 1

[Pavel-ww]

https://codepen.io/pavel-ww/pen/bGWJNRb

Answer 2

[Evgeniy]

https://codepen.io/Zhelezniy/pen/OJmqwjE

Comments

[FrontendNooob]

спасибо, но тут получается нужно сделать так что б блок Б был внутри блока А и при этом скролился до конца оранжевого блока

[Evgeniy]

FrontendNooob,
тоже самое, аналогично
обновил код, глянь ещё раз

[Evgeniy]

Родительскому блоку ставь position: relative;
дочернему, который плавный, position: sticky;

вся суть в этом

[FrontendNooob]

Для меня вся сложность заключается в том что б поместить красный блок в бирюзовый, что б он вел себя как стики и при этом не давал отступ

[Evgeniy]

FrontendNooob, нужен код, в песочнице или ссылку на сайт

[FrontendNooob]

Evgeniy, https://codepen.io/MarryPorn/pen/PomLyVj

Answer 3

[Иван К]

Я для такого юзаю либу https://github.com/ymschaap/jquery-lockfixed