Нужен скрипт: Блок, плавающий по странице вверх-вниз

[d0ublezer0]

Пример не могу показать, если бы нашел, оттуда бы и взял.

Значит, нужен такой скрипт, который бы обеспечивал эффект плавающего меню.

При этом важно ограничить верхнее и нижнее положение относительно границ страницы - чтобы не наезжал на оформление.

Мне не нужны всякие выпадающие списки или дополнительные красивости.

Нужно просто плавно "елозить" блоком до определенных границ.

Помогите ссылкой?

[Great Rash]

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

UPD: Оно?

http://www.jtricks.com/javascript/navigation/floating.html

Edited November 18, 2009 by Great Rash

[d0ublezer0]

Да, оно.

Но в скрипте я не нашел вариантов установки верхней границы (выше которой нельзя подниматься) и нижней (ниже которой нельзя спускаться)

Хочу использовать здесь:

http://denver.transmagistral.ru/services/

Левое меню должно плавать в пределах контента

UPD: Как-то раз мне попадался скрипт с такими установками, но сейчас никак не могу вспомнить, где видел.

Edited November 18, 2009 by d0ublezer0

[Great Rash]

Надо просто взять любой скрипт, реализующий данный эффект, и поиском (CTRL+F) найти в нем строку где проставляется значение top у блока.

Обычно это выглядит так:

var top = 100;
...
someDiv.style.top = top + 'px';

Далее надо просто сделать проверку, что если переменная top больше или равна 100 (к примеру), то установить ей значение 100.

Пример псевдокодом:

если (top больше или равна 100) {
	top равна 100
}

если (top меньше или равна 10) {
	top равна 10
}

вот и все собственно

[d0ublezer0]

Это будет действенно для верхней границы (в принципе, я и сам додумался) а вот с нижней как быть?

[Great Rash]

А с нижней так же как с верхней. В чем проблема?

[d0ublezer0]

Сделал

http://denver.transmagistral.ru/services/

Что пришлось поправить в скрипте:

1. Скрипт не понимает процентные значения для начального положения.

Пришлось избавиться от функции сдвига по горизонтали, по сути она мне и не нужна была. Спозиционировал в процентах через CSS.

2. Максимально верхнее положение определил в переменную, и добавил условие, предложенное Great Rash

Что делать с нижней границей - не знаю.

Размер меню по вертикали всегда будет разный, если он не явно задан как отследить, где находится нижний угол?

PS- сейчас, если высота окна маленькая, то меню "набегает" на "подвал".

Edited November 18, 2009 by d0ublezer0

[Great Rash]

У вас есть сам элемент в котором лежит меню. Вы знаете его верхнюю координату которая равна значению переменной (допустим top). Также вы можете узнать высоту элемента в котором лежит меню someDiv.offsetHeight; соответственно нижняя координата элемента будет равна:

top + someDiv.offsetHeight;

[d0ublezer0]

Да-да, это всё понятно.

Одно "но" - так как плавающий DIV имеет абсолютное позиционирование, он не растягивается по вертикали при установленном значении overflow:hidden (обычный рецепт)

Поэтому его высоту не получается вычислить.

[Great Rash]

Ничего не понял, а вы зачем этому блоку высоту задаете и оверфлоу?

[d0ublezer0]

Объясняю.

Если блок имеет position:absolute, то он не растягивается в высоту по размеру содержимого.

[Great Rash]

Если блок имеет position:absolute, то он не растягивается в высоту по размеру содержимого.

Объясняю: высоту этого самого содержимого вы же узнать можете?

[d0ublezer0]

Блин, ну никак не получается.

Всё равно наезжает на нижнее оформление.

Посмотрите пожалуйста скрипт float.js на странице http://denver.transmagistral.ru/services/

Ограничение отрабатывает в функции floatingMenu.move:

var maxPaddingTop = 548;
var maxPaddingBottom = 400;

floatingMenu.move = function ()
{

	var currentBlockHeight=floatingMenu.menuContentContainer.offsetHeight;
	var docHeight = getDocumentHeight(); // получает полную высоту документа
	var maxBottomPos = docHeight - maxPaddingBottom - currentBlockHeight;

	// ограничиваем нижнее положение
	if (floatingMenu.nextY >= maxBottomPos) {
		floatingMenu.menu.style.top = maxBottomPos + 'px';
	} else {
			floatingMenu.menu.style.top = floatingMenu.nextY + 'px';
	}	

	// ограничиваем верхнее положение
	if (floatingMenu.nextY <= maxPaddingTop) {
		floatingMenu.menu.style.top = maxPaddingTop + 'px';
	} else {
		floatingMenu.menu.style.top = floatingMenu.nextY + 'px';
	}

}

Такое ощущение, что оба "ограничителя" борются за право быть последним, назначившим высоту.

[d0ublezer0]

Всё, сам нашел.