Как на flex зафиксировать блок с текстом в центре страницы при пролистывании?

Question

[Li]

Сейчас стоит position: fixed, поэтому положение настраивается через top/left и при пролистывании блок с текстом прижат к низу страницы. Я в отчаянии. Может через js можно попробовать сделать плавающий блок?
https://codepen.io/lil012/pen/mQxwqV

Answer 1

[profesor08]

Может быть ты хочешь это:
https://css-tricks.com/position-sticky-2/

Может быть ты хочешь это:

.textwork {
    position: fixed;
    width: 30%;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
}

А еще можешь на js запрограммировать нужное поведение.

И flexbox тут ни при чем.

Comments

[Li]

sticky не поддерживается всеми браузерами(
во втором варианте блок с текстом все равно позиционируется от окна браузера и наезжает на шапку.
а вот как с js решить проблему плохо понимаю, может дадите наводку?)

[profesor08]

Lil0, в js ты можешь получить все параметры всех элементов, ширину, высоту, позицию, величину прокрутки. Этого достаточно, чтоб подсчитать нужное положение нужного элемента относительно другого элемента. При прокрутке подсчитывай и все. Если ничего не понял, то твой вариант position: sticky.

[Faraday_22]

Lil0, Делай через position sticky, есть полифил который реализует аналог position sticky, он на всех браузерах работает, вот ссылочка wd.dizaina.net/en/scripts/stickyfill