前言：

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

解决方案：

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

<script type="text/javascript" src="http://lib.vipsinaapp.com/js/jquery/1.3.2/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(
	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
					);
				}
			}
		);   
	}
);
</script>

以上就是实现侧边栏动态化的全部工序。但对于某些模板来说，还需要对侧边栏进行下处理。例如 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 模板，权当备份吧。 点我下载