Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 09.05.2017, 22:45   #1
Bulat Ibrahim
Форумчанин
 
Регистрация: 24.04.2015
Сообщений: 199
Вопрос Как сделать "fixed" при прокрутке блока

Здравствуйте. Мой сайт состоит из трёх блоков: средний (основной), правый и левый (дополнительные). Хотел бы я сделать их прокрутку как в Вконтакте. Там же, если длина одного блока заканчивается, то он "останавливается" во время прокрутки длинного (например, в основной странице пользователя - фиксируется левое поле, или в поиске людей - правое поле.)
В Фаербаге (в Фаерфокс) посмотрел в ВК - как только короткий блок докручивается до своего окончания, ей дается свойство "position:fixed" и "bottom: XXpx". И как только пользователь покрутит вверх - сразу эти свойства снимаются.

Долго ломал голову, как же это сделать - не смог понять. Предполагаю, что это делается с помощью ".scroll()" (в jQuery). А вот как сообщить действие, когда нижняя часть блока дойдёт до низа окна - не могу догадаться.

Кто может, помогите пожалуйста.
В яваскрипт и jQuery у меня опыта работы нет, к сожалению
Булат Азат улы
Bulat Ibrahim вне форума Ответить с цитированием
Старый 10.05.2017, 09:52   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

position: fixed вырвет из потока элемент, я бы его оставил в потоке и двигал скриптом через position: relative; top: xxpx или transform: translateX(xxpx);.
джейкверевский .scroll() — это событие, которое срабатывает при скролле, в колбэке которого и нужно определять текущее положение элемента и то как его двигать далее. Для определения положения у jQuery есть 2 метода: .position() и .offset(). Лично я люблю нативный метод .getBoundingClientRect(), он показывает расстояние до всех границ блока (втч до нижней) относительно вьюпорта.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 10.05.2017, 23:27   #3
Bulat Ibrahim
Форумчанин
 
Регистрация: 24.04.2015
Сообщений: 199
По умолчанию

Naive, я начал делать, как вы мне подсказали (если правильно вас понял). Но никаких изменеий в блоке нет. Не могли бы посмотреть, по правильной ли пути я иду и где ошибка, что блок вообще не двигается?
Код:
$(window).scroll(function(){
	var tZur = $(window).height(); //вычисляю высоту окна браузера
	var UnBitOz = $("#unBit").outerHeight(true); //вычисляю высоту (длину) блока
	if ($(window).scrollTop() >= UnBitOz - tZur + 130 +40) { //ловлю момент, когда блок доходит до своего конца (с этого момента его нужно "поймать", чтобы не сбежал вверх)
		$("#unBit").css({"transform":"translateY($(this).offset({top:$(window).offset(), left:val.left}))"}); //кажется, что-то тут не правильно, раз ничего не работает...
	};
});
Булат Азат улы
Bulat Ibrahim вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как из файла "Пример Меню" не очень подкованный пользователь сможет сделать файл устроенный так же как "Пример импорта" qaws Помощь студентам 2 10.09.2016 14:49
Фиксация блока при вертикальной прокрутке ВалекFCRK HTML и CSS 2 27.03.2014 16:06
Фильтровать товары при "бесконечной" прокрутке MrBrain JavaScript, Ajax 4 29.09.2012 22:48
при вводе на листе "магазин"- код товара появлялось "описание" товара из "склада" с "продажной ценой" aleksei78 Microsoft Office Excel 13 25.08.2009 12:04
C++, препроцессор, как из "int" сделать "char"? Максай Помощь студентам 3 05.09.2008 08:16