автор
Михаил
Ваваев




Технология
2ScrollBars

Динамическое расширение содержимого

В этой статье пойдет речь об основной функции интерактивности нашей левой колонки. Эта функция была одним из двух основных мотивов всей этой затеи. Суть функции состоит в том, чтобы расширять основной контент на всю ширину экрана, когда мы убираем левую колонку за экран.


В определении момента, когда левая колонка целиком уходит за экран, нам поможет элемент <div id="leftfooter">. Когда его верхняя граница уходит за экран – тогда мы и вызываем функцию. Самым очевидным было бы проверять координаты этого элемента на отрицательность, но это оказалось не верным решением из-за различного поведения браузеров. Кроссбраузерным решением будет сравнивание координат верхних границ элементов <div id="leftfooter"> и вмещающего его контейнера левой колонки <div id="left">, верхняя граница которого находится на верхней границе экрана.

/*****************************************************************************
 * Функция scroll_expand()
 *
 * Функция проверяет, если содержимое левой колонки уходит за экран,
 * колонка сворачивается, предоставляя основному контенту больше места.
 *
 * Параметры:
 *		без параметров
 *
 * Возвращаемые значения:
 *		ничего не возвращает
 ****************************************************************************/
function scroll_expand()
{
	var footer = document.getElementById('leftfooter').getBoundingClientRect();

	var right = document.getElementById('right');
	var left = document.getElementById('left').getBoundingClientRect();
	if ( footer.top < left.top )
		right.style.width = '100%';
	else 
		right.style.width = '70%';
}
Эта функция должна быть связана с событием прокрутки левой колонки. Значит вызывать ее будем из функции leftScroll().
/*****************************************************************************
 * Функция leftScroll()
 *
 * Функция обрабатывает событие левой полосы прокрутки.
 *
 * Параметры:
 *		без параметров
 *
 * Возвращаемые значения:
 *		ничего не возвращает
 ****************************************************************************/
function leftScroll()
{
	scroll_head(); scroll_expand();
}
Однако у нас должна остаться возможность прокрутить левую колонку обратно. А это значит, что левая колонка (элемент <div id="left">) должен находиться в стеке содержимого сверху расширенной правой колонки. И вот здесь возникает масса неудобных проблем. Хотя элемент <div id="leftfooter"> пустой и прозрачный (хотя ничто вам не мешает поместить туда что-нибудь, что вы хотите всегда держать перед глазами), но он сделает недоступным для кликов все содержимое под ним.

В статье «Стек содержимого элемента position: fixed» я уже затрагивал эту проблему, где я упомянул, что CSS свойство pointer-events не поможет нам в ее решении.

Итак, легкого решения проблемы не найдено. Будем искать решение по-сложнее. Нужно разместить все участвующие элементы по различным слоям. Определим все элементы, которые могут потребовать клика. В моем случае это были только ссылки и элементы формы. Для них я создал таблицу стилей, которая приподнимает эти элементы над левой колонкой.
a, input, textarea {
	position: relative;
	z-index: 4;
}
В вашем случае к этому списку могут быть добавлены другие элементы. Подумайте об этом. Для левой колонки у нас до сих пор не было свойства z-index. Оно должно быть ниже, чем у упомянутых выше элементов:
div#left {
	z-index: 3;
}
Обновленный HTML шаблон с функцией динамического расширения содержимого можно посмотреть здесь.

Все комментарии

нет комментариев

Ваш комментарий

Имя:
вставить:
Введите код с картинки