Jump to content
  • 0

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


d0ublezer0
 Share

Question

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

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

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

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

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

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

Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0

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

UPD: Оно?

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

Edited by Great Rash
Link to comment
Share on other sites

  • 0

Да, оно.

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

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

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

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

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

Edited by d0ublezer0
Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

Сделал

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

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

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

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

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

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

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

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

Edited by d0ublezer0
Link to comment
Share on other sites

  • 0

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

top + someDiv.offsetHeight;

Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

  • 0

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

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

Посмотрите пожалуйста скрипт 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';
}

}

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy