div «прилипший» к scroll'у

Question

[tytar]

Нужна помощь, возможно есть готовые решения, есть div со скролом, нужно что бы к скролу как бы прилип div и перемещался вместе с бегунком скрола. Нечто похожее — когда в хроме просматриваешь pdf документ, вот там возле скрола пишет текущую страницу.

Comments

[tytar]

Вопрос по ходу дела, можно ли как то узнать размер самого ползунка скрола?

Answer 1

[Ganesh]

var elm = document.createElement('div');
elm.style.position = 'fixed';
elm.style.padding = '5px';
elm.style.right = '0';
elm.style.zIndex = '11110';
elm.style.background = '#fff';
elm.style.boxShadow = ' 0 0 1px rgba(0, 0, 0, 0.4)';
elm.style.borderRadius = '5px 0 0 5px';
elm.innerHTML = 20;

document.body.appendChild(elm);

window.onscroll = function () {
              elm.style.top = (document.documentElement.clientHeight - 36) * window.document.body.scrollTop / window.document.body.scrollHeight + 18 + 'px';
}

Например так

Comments

[tytar]

Скажите, откуда взяты числа 36 и 18?

[Ganesh]

Это высота стрелочек.

Answer 2

[truekenny]

Получилось так.
Скролл обрисовывается по-разному в браузерах / ОС поэтому идеально не будет, если не рисовать свой скролл, а использовать системный.

Answer 3

[Дмитрий Гукетлев]

Как-то так: jsfiddle.net/v8Wba/2/

Comments

[VoidVolker]

В опере 12 и IE10 не работает.

[Дмитрий Гукетлев]

У меня вообще jsfiddle в IE не работает. Самое главное — формулу рассчета положения я написал:
blockPosition = (scrollPosition / (bodyHeight — viewportHeight) * (viewportHeight-blockHeight))

Это обеспечивает передвижение блока ровно от верхнего до нижнего края viewport. Сверстать это под все браузеры я не обещал, думаю автор справится с этим сам, как и с запихиванием в див, вместо боди.

Answer 4

[Eugene Obrezkov]

.your-div {
    position: fixed;
    left: 0;
    right: 0;
}

Не оно?

fixed
По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.

Comments

[tytar]

К сожалению, нет, немного не то.

Answer 5

[Ganesh]

>>Вопрос по ходу дела, можно ли как то узнать размер самого ползунка скрола?

Можно конечно: window.screen.height * window.screen.height / document.height

Answer 6

[Vorchun]

А если усложнить: где-то на странице есть div со скроллом. Внутри лежит див, который перемещается вместе со скроллом. Несколько решений уже написали выше. А что если мне надо:

1. Заменить скроллбары на свой дизайн
2. Див, который прилипает к бегунку, вынести вправо. Т.е. за контейнер
3. Чтобы работало IE8+

?

Answer 7

[gaparchi]

Я в таких случаях пользуюсь плагином Portamento.js