前言:

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

解决方案:

由于代码用到了 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 模板,权当备份吧。 点我下载