Прокручивающийся position: sticky?

213
04 апреля 2017, 09:55

Есть сайдбар, высота которого превышает высоту экрана. Как известно, position: sticky при прокрутке просто закрепляет верх блока вверху страницы (при top: 0), и, чтобы увидеть не влезающий низ блока, нужно докрутить страницу до самого низа. Однако мне бы хотелось, чтобы sticky-блок прокручивался вместе со страницей, а закреплялся он только по достижении его низа. И наоборот: при прокрутке снизу вверх чтобы sticky-блок тоже прокручивался и закреплялся только по достижении верха sticky-блока. Как-то так сделано у сайдбаров ВК.

Словами нормально объяснить чёт не получается, поэтому вот вам гифки (ссылками, ибо много весят):

  • как делает position: sticky (чистый CSS): http://imgur.com/pNKTijD

  • как хочу я (это я наклепал на JS): http://imgur.com/Bn8RDtZ

Реально ли сделать такое на чистом CSS? Или, может, будет реально в будущем в каком-нибудь CSS4?

READ ALSO
Изменить src у iframe javascript'ом

Изменить src у iframe javascript'ом

Здравствуйте! Подскажите, пожалуйста, правильно ли я решаю вопрос:

356
Смена селектора на разных блоках js

Смена селектора на разных блоках js

Всем приветКак по нажатию кнопки "Выбрать" на одном блоке, data-background-color стали smoke на двух других? Код сдесь: https://codepen

185
Какой display у элемента со свойством float?

Какой display у элемента со свойством float?

Интересен следующий момент:

217