Как сделать плавающую панель как у Вконтакте, на jQuery?

Question

[Alexander-K]

Как сделать такую плавающую панель на jQuery?
Вот как тут, правая панель: vk.com/search

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

Чтобы увидеть, сделайте окно браузера маленькой высоты, и после этого зайдите на vk.com/search, и посмотрите как ведет себя правая панель при прокрутке страницы вверх-вниз.

Answer 1

[Владик Лимонадик]

jQuery(document).ready(function ($) {
	$fixed = $('#your-id'); // ID элемента
	$(window).scroll(function(){
			if($(window).scrollTop()>254) // Если сверху проскроллено 254 пикселя
			{
				$fixed.css({position:"fixed", top:0}); // То фиксируем элемент
			}
			else // Если нет
			{
				$fixed.css({position:"relative", top:0}); // То возвращаем стили
			}
	});
});

Comments

[Alexander-K]

А как сделать чтобы сама плавающая панель прокручивалась, если она длинная? Вот сделайте окно браузера маленькой высоты, и после этого зайдите на vk.com/search, и посмотрите как ведет себя правая панель при прокрутке страницы вверх-вниз.

[Владик Лимонадик]

@Alexander-K почитайте про overflow: scroll на MDN/htmlbook

[Alexander-K]

overflow: scroll - не вариант, т.к. прокручиваться панель будет только если курсор наведен на нее. А надо чтобы прокручивалась вся страница, но при этом панель останавливалась при достижении своих границ.

[Александр Зачиналов]

Надо наоборот, отслеживать top элемента, когда он будет равен 0, то присваивать position : fixed

Answer 2

[Сергей Протько]

mojotech.github.io/stickymojo

Comments

[Владик Лимонадик]

А давайте 35 библиотек подключать для того, чтобы сделать то, что легко делается нативным API jquery ?

[Сергей Протько]

@knitevision1 вы правы, как же я ошибался в жизни. Ведь намного проще написать очередной велосипед, потратить дополнительные деньги клиента, возможно побаловаться с багами, переписать его пару раз в виду изменений требования к проектам, нежели воспользоваться готовым и проверенным временем решением.

Да и фраза "нативным API jquery" не кажется вам смешной?

[Юрий Лобанов]

@knitevision1 «нативным API jquery ?» — в этой фразе прекрасно все, в том числе пробел перед вопросительным знаком.

Answer 3

[Дмитрий Евграфович]

stickyjs.com я его в последнем проекте использовал для такой же панели

Answer 4

[Leonid]

HTML:

<div data-role="panel" id="left-panel" data-display="overlay" data-position-fixed="true"></div>

CSS:

.ui-panel.ui-panel-open {
    position:fixed;
}
.ui-panel-inner {
    position: absolute;
    top: 1px;
    left: 0;
    right: 0;
    bottom: 0px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}
.ui-page-active.ui-page-panel {
height: 70%;
}