使用JavaScript和CSS实现异步移动侧边栏

什么是异步移动？当可视区域下移（即滚动条下移）时，左侧的侧边栏会同时向下移动，这样无论什么时候都不会出现侧边栏留白的现象。同时还可以发现，当可是区域在页面最上方时，侧边栏的顶部靠近浏览器顶部；但当显示区域在页面底部时，侧边栏的底部正好完全显示出来。这一点也在代码中有所体现。

首先要获得浏览器相关参数

function  getPagePos() {
    var st, sl, sw, sh, cw, ch;
    if (document.documentElement && document.documentElement.scrollTop) {
        st = document.documentElement.scrollTop;
        sl = document.documentElement.scrollLeft;
        sw = document.documentElement.scrollWidth;
        sh = document.documentElement.scrollHeight;
    } else if (document.body) {
        st = document.body.scrollTop;
        sl = document.body.scrollLeft;
        sw = document.body.scrollWidth;
        sh = document.body.scrollHeight;
    }
    cw = document.documentElement.clientWidth;
    ch = document.documentElement.clientHeight;
    return { scrollTop : st, scrollLeft: sl, scrollWidth: sw, scrollHeight: sh, clientWidth : cw, clientHeight : ch };
}

返回值分别为:

scrollTop:垂直滚动条位置

scrollLeft:水平滚动条位置

scrollHeight:页面总高度

scrollWidth:页面总宽度

scrollWidth:可见区域高度

clientWidth:可见区域宽度

这些参数对侧边栏位置的计算起到重要的作用。Simoll.us页面布局（div的id）如下：

为了实现侧边栏的位移，我们可以用JavaScript改变CSS中的padding-top值（使用jQuery库），代码如下：

varnowPt = 0;
varaimPt = 0;
varasSteps = 12;
varpagePos;
varminDeltaPt = 3;
functionasyncSidebar() {
    if (Math.abs(aimPt - nowPt) < 1)
    {
        setTimeout(function(){asyncSidebar();}, 500);
    } else {
        vardeltaPt = (aimPt - nowPt) / asSteps;
        if (Math.abs(deltaPt) < minDeltaPt) {
            if (deltaPt > 0)
            {
                deltaPt = minDeltaPt;
            } else {
                deltaPt = -minDeltaPt;
            }
        }
        vargotoPt = nowPt + deltaPt;
        $("#sidebar").animate({paddingTop:gotoPt + "px"}, 1000 / asSteps * 0.95);
        nowPt = gotoPt;
        setTimeout(function(){asyncSidebar();}, 1000 / asSteps);
    }
}
 
functionasyncSidebarUpdate() {
    varpagePos = getPagePos();
    aimPt = ($("#content").height() - $("#sidebar").height()) * pagePos.scrollTop / (pagePos.scrollHeight - pagePos.clientHeight);
}
 
$(function() {
    window.onscroll = asyncSidebarUpdate;
    asyncSidebar();
});

在这段代码中，我们设置window.onscroll监听器来更新滚动条位置，用asyncSidebar函数更新侧边栏CSS。这样的好处是便于控制侧边栏的重绘，不因onscroll监听器的调用导致卡顿。

在重绘CSS的代码中，将单帧时间乘以常数0.95，避免由于CPU计算能力导致jQuery队列过长（但改方法并未完全解决此问题，希望能找到更好的解决办法）

如果要移植这段代码非常简单，只需要根据主题修改各div的id即可。

文章来自：使​用JavaScript和CSS实现异步移动侧边栏