Как fixed элемент зафиксировать относительно определенной секции?

Question

[Alice777]

Вот набросал код: https://jsfiddle.net/p53mkne0/

В первой, второй и третьей секции текст меняется (его может быть как больше, так и меньше)

Тоесть значение для красной иконки top: x% не подходит

Красная иконка должна быть зафиксирована относительно серого блока(при скроле в серой области он всегда находится по правому краю). С помощью JS и тригер элемена внутри серой секции это можно осуществить. Подскажите пожалуйста как

Answer 1

[PiggyPig]

Если я Вас правильно понял, то вот:
https://jsfiddle.net/yn307ffu/

Красный квадрат помещается в серый блок. Родительскому элементу [серому блоку] задаем значение position: relative, а красному квадрату position: absolute. Теперь красный квадрат абсолютен относительно области серого блока. А там уже поднимайте отрицательным значением на сколько нужно.

Как сделать тоже самое, не вкладывая в серый блок я не знаю.

Comments

[Alice777]

Увы, не то, мне нужно , чтобы красный квадрат находился по правую сторону в сером блоке и вел себя как Position:fixed элемент

[Kovalsky]

Alice777: это взаимоисключащие параграфы: "чтобы красный квадрат находился по правую строну в сером блоке" - это значит что блок находится в сером блоке, а тогда фраза "вел себя как fixed" не имеет смысла, ибо fixed означает именно отсутствие привязки к какому-то конкретному элементу.

"Красная иконка должна быть зафиксирована относительно серого блока(при скроле в серой области он всегда находится по правому краю)" - это я был реализовал просто поставив красную иконку в серый блок.

Если всё не так как вам нужно, то объясните еще разок.

[Alice777]

Вот смотрите как мне нужно: https://jsfiddle.net/p53mkne0/2/

(это не правильная не грамотная костыльная верстка)

я то красному блоку задал фиксированный Top: 84%, а контент сверху может увеличиться, и красный блок не будет четко в начале серого блока

[PiggyPig]

Alice777: кажется дошло.

https://jsfiddle.net/p53mkne0/5/

Единственное нужно, чтобы эти блоки изначально находились в видимой части страницы, иначе fixed будет больше высоты экрана и при скролле красный блок не будет виден.

[Alice777]

PiggyPig: спасибо, но я не вижу переходя по этой ссылке красную иконку, де она?

[PiggyPig]

Alice777: А Вы страницу вывода повыше сделайте. Предполагаю, что она у вас узкая по вертикали. Я же писал, что единственный минус у Вашей реализации - это необходимость видимости серого блока при загрузке страницы, т.к. в противном случае красный блок зафиксируется под страницей, где и находится серый блок при загрузке.