前言:
今天写完《为模板增加一个侧边栏》之后,我又急不可耐的想写出此文。原因呢,很简单,就是想在自己记忆恍惚之前记录下所有改动,从长远角度来看方便自己。
解决方案:
由于代码用到了 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 模板,权当备份吧。 点我下载
正好需要,感谢分享!!