Ускоренный скролл длинных колонок на jQuery

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

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

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

Можно прибегнуть к помощи слайдеров, можно увеличить количество элементов, в конце концов можно уменьшить размеры элементов. Но, опять же будет всё не так, как хочется.

Предлагаю разобрать вариант ускоренного скроллинга длинных колонок с помощью jQuery.

Как это работает?

Для начала необходимо определиться с количеством колонок (у меня их будет 4) и подготовить структуру страницы:

<div class="cols">
	<div id="col1">
		<div class="item">
			<img src="/images/line1_001.jpg" />
		</div>
		// Еще много таких элементов
	</div>
	<div id="col2">
		<div class="item">
			<img src="/images/line2_001.jpg" />
		</div>
		// Еще много таких элементов
	</div>
	<div id="col3">
		<div class="item">
			<img src="/images/line3_001.jpg" />
		</div>
		// Еще много таких элементов
	</div>
	<div id="col4">
		<div class="item">
			<img src="/images/line4_001.jpg" />
		</div>
		// Еще много таких элементов
	</div>
</div>

Структура у нас не сложная, есть один общий блок с классом .cols, который объединяет в себе все наши колонки, и соответственно 4 блока (колонки), в каждой из которых находятся свои элементы с классом .item, в которых может быть размещено что-либо, не обязательно картинки.

Оформление

Добавим некоторое оформление, чтобы внешне было видно что к чему.

.cols {
	position: relative;
	overflow: hidden;
}

.cols #col1 {
	width: 25%;
	position: absolute;
	left: 0px;
	top: 0px;
}

.cols #col2 {
	width: 25%;
	position: relative;
	left: 25%;
	top: 0px;
}

.cols #col3 {
	width: 25%;
	position: absolute;
	left: 50%;
	top: 0px;
}

.cols #col4 {
	width: 25%;
	position: absolute;
	left: 75%;
	top: 0px;
}

.cols .item {
	position: relative;
}

.cols .item img {
	width: 100%;
	display: block;
}

.cols .item .desc {
	color: #343434;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: absolute;
	left: 0px;
	top: 10px;
	font-size: 9px;
	display: block;
	padding: 5px 5px 5px 10px;
	background-color: #dc9a7a;
}

.cols .item a {
	display: block;
	position: absolute;
	right: 10px;
	bottom: 10px;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 9px;
	font-weight: bold;
	text-transform: uppercase;
	color: #4d1f0f;
	text-decoration: none;
	border: 2px solid #fff;
	border-radius: 10px;
	background-color: #dc9a7a;
	padding: 5px 10px;
}

.fixed {
	position: fixed;
	background-color: #fff;
}

Обратите внимание, что для второй колонки #col2 мы задали position: relative — сделано это для того, чтобы не определять высоту для общего блока. Это свойство важно указать для столбца с наименьшей длиной. В то время как для остальных колонок указываем position: absolute, т.к. мы будем двигать блоки относительно общего блока. И еще один важный момент, общему блоку .cols не обязательно указывать высоту, она будет принимать значение высоту наименьшей колонки, для которой как раз и задали свойство position: relative. Важно также заметить, что мы нигде не используем свойство float, если по каким-либо причинам Вам необходимо его использовать, тогда придется указать конкретное значение высоты для общего блока .cols. Помимо этого мы добавили overflow: hidden — это необходимо для того, чтобы скрыть все элементы, которые не умещаются в блоке. На рисунке ниже, можно увидеть как в итоге будет выглядеть нижняя часть страницы.

Всё ровно и красиво, как и вверху, но, в результате добавленного оформления теперь не видно элементы, которые не уместились.

Функция скроллинга

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

Сперва подключите библиотеку jQuery удобным для Вас образом, после чего добавьте следующий скрипт:

$(function() {
	function scrollPage() {
		h_scroll = $('.cols').outerHeight() - $(window).height(); // Определяем высоту статичного блока с учетом высоты окна браузера
		if (h_scroll <= 0) { // Если высота статичного блока меньше высоты окна браузера,
			h_scroll = 1; // то коэффициент скролла равен единице
		}
		
		// Определяем дополнительные максимальные скроллы колонок, вторую колонку пропускаем, т.к. она является наименьшей
		fast_top_max_col1 = $('#col1').outerHeight() - $('.cols').outerHeight();
		fast_top_max_col3 = $('#col3').outerHeight() - $('.cols').outerHeight();
		fast_top_max_col4 = $('#col4').outerHeight() - $('.cols').outerHeight();
		
		scroll_prozent = ($(window).scrollTop() / h_scroll) * 100; // Определяем текущий процент скролла окна
		
		// Выставление скролла быстрых колонок с проверкой на вылет из зоны скролла в случае использования большого шага скролла,
		// опять же, вторую колонку пропускаем, т.к. в ней используется стандартный шаг скролла
		if (scroll_prozent >= 0 && scroll_prozent <= 100) {
			$('#col1').css('top', ((fast_top_max_col1 * scroll_prozent) / 100) * (-1));
			$('#col3').css('top', ((fast_top_max_col3 * scroll_prozent) / 100) * (-1));
			$('#col4').css('top', ((fast_top_max_col4 * scroll_prozent) / 100) * (-1));
		} else {
			if (scroll_prozent > 100) {
				$('#col1').css('top', fast_top_max_col1 * (-1));
				$('#col3').css('top', fast_top_max_col3 * (-1));
				$('#col4').css('top', fast_top_max_col4 * (-1));
			}
		}
	}
	
	scrollPage();
	
	$(window).resize(function() {
		scrollPage();
	});
	
	$(window).scroll(function(){
		scrollPage();
	});
});

Как видите, мы создали функцию scrollPage(), в которой мы производим все необходимые операции. После чего мы вызываем эту функцию в момент загрузки страницы, в момент мастшабирования страницы (на случай если элементы и столбцы могут масштабироваться), а также в момент скроллинга страницы. Что-либо еще описывать излишне, т.к. скрипт прокомментирован и вполне понятен.

Что же в итоге получилось, Вы можете узнать из примера или скачав вложение в конце статьи.