Как настроить такую прокрутку на сайте?

Question

[Александр Андреев]

Как настроить такую прокрутку колонок на сайте joxi.ru/Dr8Kk5Pc4l1eWA ? Тип независимая от соседних колонок прокуртка. Доскролилась колонка до конца своего содержимого и дальше не едет.

Answer 1

[Максим Тимофеев]

manos.malihu.gr/jquery-custom-content-scroller

Comments

[Александр Андреев]

при чём тут custom scrollbar? Тут разве стилями нельзя обойтись?

[Максим Тимофеев]

Александр Андреев: красивее, функциональнее, можно конечно и сталями

[nosazus]

Непонятно к чему этот ответ. Вопрос хоть прочитал?

[Максим Тимофеев]

nosazus: Ну так покажите свой. Я с помощью этого плагина бы реализовал это. Есть ли другие способы - наверняка, но зачем велосипедить?

[nosazus]

Максим Тимофеев: Каким образом тысобрался плагином, который украшает скроллбар делать стики скролл?

[Максим Тимофеев]

nosazus: этот плагин не просто украшает, там много методов, дергая которые можно сделать что угодно

[nosazus]

Максим Тимофеев: ну посмотрел я все демки - ничего даже близко подходящего.

[Максим Тимофеев]

nosazus: демки? А доки?

[nosazus]

На доки времени нету, да еще и на ненужный мне в работе джеквери. Лучше переделать вот это решение под сбя - shpargalkablog.ru/2013/09/scroll-block.html
Чем я и займусь на досуге, прикручивая его к Vue))

[Максим Тимофеев]

На доки времени нету,

ни чем помочь не могу

и на ненужный мне в работе джеквери

А Вы тут при чем? Вы же не автор вопроса

Чем я и займусь на досуге, прикручивая его к Vue))

удачи и успехов, как это связано с моим ответов не могу понять. Мой вариант будет работать? Да. А использовать его или нет выбор автора, так же как и Ваш. Был бы в вопросе намек на Vue, не было бы ответа про jquery.
Уточню, мои ответы не должны влиять на то, чем Вы занимаетесь на досуге. Пора выбирать досуг самостоятельно ))).

Answer 2

[Александр Андреев]

В общем сделал вот так:

//Фиксация первой колонки
    function firstColFixed(firstColLedge){
    	//menu_col_inner_wrap - обёртка содержимого внутри первой колонки
    	if(firstColLedge > 0){
    		if($(this).scrollTop() >= firstColLedge && !$('.menu_col_inner_wrap').hasClass('left_col_fixed')){
    			$('.menu_col_inner_wrap').addClass('left_col_fixed');
    			$('.menu_col_inner_wrap').css('top', '-'+firstColLedge+'px');
    		} 
    		
    		if($(this).scrollTop() < firstColLedge && $('.menu_col_inner_wrap').hasClass('left_col_fixed')){
    			$('.menu_col_inner_wrap').removeClass('left_col_fixed');
    			$('.menu_col_inner_wrap').css('top', 'none');
    		}
    	} 
    }
    
    //Исходные данные
    var firstColHeight = $('.menu_col').height();
    var windowHeight = $(window).height();
    var firstColLedge = firstColHeight - windowHeight;
    
    $(window).resize(function(){
        firstColHeight = $('.menu_col').height();
        windowHeight = $(window).height();
        firstColLedge = firstColHeight - windowHeight;
    });
    
    //Запуск функции при загрузки страницы
    firstColFixed(firstColLedge);
    
    //Запуск функции при скролле
    $(window).scroll(function () {
    	firstColFixed(firstColLedge);
    });

тут menu_col - это первая колонка которую надо фиксировать, а menu_col_inner_wrap - это обёртка внутренностей этой колонки, чтобы не нужно было мудрить с отступами, когда на menu_col_inner_wrap вешается класс с position:fixed и она выпадает из потока.