滚动时如何制作视差边栏

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;
}