[WordPress][教程] 使侧边栏随屏幕滚动

前言：

今天写完《为模板增加一个侧边栏》之后，我又急不可耐的想写出此文。原因呢，很简单，就是想在自己记忆恍惚之前记录下所有改动，从长远角度来看方便自己。

解决方案：

由于代码用到了 jquery 库，因此需要提前加载。在 header.php 的 head 结束标签之前对 jquery 库进行加载，并在结束标签之后加入代码。具体如下：

$(
    function()
    {
        var $sidebar = $("#sidebar-2"),//这里的参数是所需要移动的模块的id。
            $window = $(window),
            offset = $sidebar.offset(),
            topPadding = 15;   

        $window.scroll
        (
            function()
            {
                if ($window.scrollTop() > offset.top)
                {
                    $sidebar.stop().animate
                    (
                        {marginTop: $window.scrollTop() - offset.top + topPadding},
                        1000
                    );
                }
                else
                {
                    $sidebar.stop().animate
                    (
                        {marginTop: 0},
                        1000
                    );
                }
            }
        );   
    }
);

以上就是实现侧边栏动态化的全部工序。但对于某些模板来说，还需要对侧边栏进行下处理。例如 glossy stylo 1.04 ,在 style.css 中将 sidebar 默认定义为左浮动。在正文长度过短的情况下，靠下方的侧边栏会移动到左侧去，因此需要对其进行些修改。首先看修改前的代码：

#sidebar
{
    float:left;
    margin-left:10px;
    margin-top:9px;
    width:240px;
}

要实现多个侧边栏始终位于同一侧且不乱动，就要对其浮动方式进行修改，修改需要对 css 的浮动方式有大致了解，详情可以参考 w3school 的相关讲解，这里不作赘述，直接放上修改后的代码。

#sidebar
{
    float:right;
    clear:right;
    margin-left:10px;
    margin-top:9px;
    width:240px;
}

至此，大功告成。发布下自己改造的 glossy stylo 模板，权当备份吧。 点我下载