Ускоренный скролл длинных колонок на 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(), в которой мы производим все необходимые операции. После чего мы вызываем эту функцию в момент загрузки страницы, в момент мастшабирования страницы (на случай если элементы и столбцы могут масштабироваться), а также в момент скроллинга страницы. Что-либо еще описывать излишне, т.к. скрипт прокомментирован и вполне понятен.
Что же в итоге получилось, Вы можете узнать из примера или скачав вложение в конце статьи.
Комментарии
Здесь еще никто не оставлял комментарии.