Как сделать параллакс боковой панели при прокрутке

Question

У меня есть макет с большой боковой панелью и небольшим контентом, как этот.«Фиксированная часть» - это средняя позиция залипания.

Я пытаюсь сделать это с помощью scrollTop, но на боковой панели это выглядит примерно так

Код должен выполняться только в том случае, если высота основного содержимого меньше содержимого боковой панели.

Код последней попытки.

function sidebarParallax(expertStatisticsHeight) {
        var sidebar = $('aside.site-aside');
        var main = $('main.site-content');
        var footer = $('footer');
        var c = 1;

        sidebar.css({
            position: 'absolute',
            right: 0,
            width: $(document).width() - main.width(),
        });

        if ((expertStatisticsHeight + $banner.height()) > main.height()) {
            var speed = c - (main.height() / sidebar.height());

            sidebar.css('transform', 'translateY(' + -speed + 'px)');
        } else {
            sidebar.removeAttr('style');
        }
    }

Как сделать, чтобы при прокрутке внизу, боковой панели внизу и внизу контента становились одинаковыми.

Заранее спасибо!

Answer 1

Я нашел решение !!!

var sidebar = $('aside.site-aside');
var main = $('main.site-content');
var banners = $('.section-banner');
var bannersCount = banners.length;
var isMainLessThanSidebar = init();

$(window).resize(checkSize);

$(document).ajaxComplete(checkSize);

$(window).scroll(function() {
    if (isMainLessThanSidebar) {
        return sidebarParallax();
    }
});

function checkSize() {
    isMainLessThanSidebar = init();
}

function sidebarParallax() {
    var scrolled = window.pageYOffset || document.documentElement.scrollTop;
    var scrollLeft = mainDiff - scrolled;
    var percent = scrollLeft / mainDiff;
    sidebar.css('top', -diff + (diff * percent));
}

function init() {
    sidebar.css({
        position: 'absolute',
        right: 0,
        width: $(document).width() - main.width()
    });

    var isMainLess = sidebar.height() > main.height();

    if (isMainLess) {
        diff = sidebar.height() - main.height();
        mainDiff = $('main.site-content').height() - document.documentElement.clientHeight;
        sidebarParallax();
    } else {
        sidebar.removeAttr('style');
    }

    return isMainLess;
}