滚动时如何制作视差侧边栏答案

【问题标题】：How to make parallax sidebar when scrolling滚动时如何制作视差侧边栏
【发布时间】：2019-09-19 01:17:01
【问题描述】：

我有一些像这样的大侧边栏和小内容的布局。 “固定部分”是粘性位置的意思。

我尝试用 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');
        }
    }

如何制作，当我在底部滚动时，侧边栏底部和内容底部变得相同。

提前谢谢你！

【问题讨论】：

标签： javascript jquery html css frontend

【解决方案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;
}

【讨论】：