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

Question

[Alexei Lavrov]

Добрый день!

У меня обычная сетка сайта: слева меню, справа во всю ширину несколько блоков. Мне надо сделать так, чтобы пока человек смотрит один из этих блоков, внизу экрана был плавающий элемент, который при просколле родительского блока уходил бы вместе с ним.

То есть мне как бы нужен sticky kit, только наоборот :) Там при проскролле элемент прилипает к верху экрана, а тут должно быть наоборот, пока до элемента не прокрутили, он болтается внизу экрана.

Схемы для наглядности:


Подскажите, пожалуйста, каким образом можно такое реализовать? Спасибо.

Comments

[Ankhena]

https://yandex.ru/search/?text=sticky%20%D0%BD%D0%... и т.д.

[Alexei Lavrov]

Ankhena, не подходит. Не крепится блок к низу родителя.

[Ankhena]

Alexei Lavrov, сильно! Полно плагинов и инструкций как сделать самому.
Вам нужно узнавать прокрутку и соответственно менять позицию с fixed на absolute.

Если с подсказками никак, то это на фриланс.

Выкладывайте в песочницу ваш неполучившийся код со всеми скриптами.

[Alexei Lavrov]

Ankhena, да разберусь... Полопатил stackoverflow там у всех обратная проблема. В sticky-kit, которым пользовался, эта фича не реализована. Сейчас буду другие скрипты пробовать. Просто, хотел спросить, может уже кто-то сталкивался именно с такой задачей.

Answer 1

[Евгений]

у родителя:
position: relative;

у плавающего элемента:

position: sticky;
top: 0;

Comments

[Евгений]

если я правильно понял вопрос

[Alexei Lavrov]

Евгений, тогда же получится, что надо размещать "bottom bar" вверху "block 1"? И липнуть он будет тоже к верху страницы?

[Евгений]

Alexei Lavrov, боттом бар размещать внутри блок 1, и указывать bottom: 0 вместо top

[Alexei Lavrov]

Сработало :) Спасибо!

Answer 2

[hesrun]

Ну так или css stiky и позицию указывать нижнюю.
Или любой липкий плагин, он отслеживает и верхние и нижние границы...