Как прокрутить фиксированную панель?

Question

[aleksandrozz]

Всем привет!

Столкнулся с такой проблемой: Имеется фиксированная панелька слева с высотой в 100% экрана. Так вот, если весь контент не помещается в эти 100%, то соответственно он обрезается. Где-то видел такое решение, что при прокрутке страницы сама панелька тоже прокручивается пока не кончится в ней контент и если прокрутить страницу наверх, то и панелька прокрутится до ее начала.

Может быть кто-то знает как это реализовать или знает сайт где такое реализованно?

Заранее спасибо за помощь!

Answer 1

[Мак Алексей]

Обычно, делается так:
Пока прокрутка не добралась до дна панельки - position: absolute, если страница прокручивается дальше - position: fixed;
Недостатком такого подхода будет то, что для того чтоб увидеть верх панели - надо будет промотать в самый верх страницы.
Но можно написать небольшой скрипт который будет прокручивать панель в зависимости от относительной прокрутки страницы.
https://css-tricks.com/scroll-fix-content/

Такой подход, к примеру на github.com - https://github.com/veryEvilMan/fl-ru-damp/issues/11 (панель subscribe, лок по верху панели)

Comments

[aleksandrozz]

Не совсем так поняли наверно или я не понял... Вот даже здесь, на сайт тостер, есть фиксированная панель сбоку. Если вы сделаете высоту экрана скажем 500px, то не увидите половины блока. Вот как бы это исправить, чтобы можно было увидеть весь контент...

[Мак Алексей]

https://jsfiddle.net/g2yneceh/1/

[Мак Алексей]

100 пикселей добавил для наглядности. И id использовал только потому, что есть проблемы с кепчуром скролла в iframe. Скрипт не учитывает вариант когда панель короче, надо добавить пару условий в функцию.