实现侧边栏滚动之填补空白

看题目不知道大家是否明白过来了，不明白的，那么请看本站侧边栏，拉到页面下面的效果，上次妈咪中国问我页面在滚动到下面的时候，如何实现侧边跟随滚动，对与这个问题其实之前也有不少网友问过我，我的直接回答是去hcms那里下载一个主题自己研究一下，就OK了，但是考虑到很多新手折腾起来麻烦，也为了能在其他非wordpress博客系统实现，于是整理出来，供大家按部就班！曾经写过一篇让侧边栏滚动起来，不过那个是整个侧边栏滚动，这个是部分侧边栏滚动。

第一步：首先header头部添加如下两段代码：

如果是typecho博客系统：

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php $this->options->themeUrl('zy.js'); ?>"></script>

如果你的是wordpress：

你就把<?php $this->options->themeUrl('zy.js'); ?>">替换成：<?php bloginfo('template_url'); ?>/zy.js

注意在文件目录下新建一个js文件。

第二步：zy.js文件内容如下：

//sidebar scroll
jQuery(document).ready(function($) {if(!isie6()){var rollStart=$('#rollstart'),rollSet=$('#biaoqian,#suiji');rollStart.before('<div class="zy_rollbox"></div>');var offset=rollStart.offset(),objWindow=$(window),rollBox=rollStart.prev();if(objWindow.width()>960){objWindow.scroll(function(){if(objWindow.scrollTop()>offset.top){if(rollBox.html(null)){rollSet.clone().prependTo('.zy_rollbox')}rollBox.show().stop().animate({top:0,paddingTop:15},400)}else{rollBox.hide().stop().animate({top:0},400)}})}}
function isie6() {if ($.browser.msie) {if ($.browser.version == "6.0") return true;}return false;} });

第三步：

css文件最后添加一下代码：

.zy_rollbox {position:fixed;background:none;width:240px;}

第四步：

在你最后一块的侧边栏最后加上如下代码：

<div id="rollstart"></div>

完成以上四步以后，那么根据你现在的主题侧边的代码添加一个id，比如：

原来是<div class="XXX" id="biaoqian"> 就是添加后面的一句id="biaoqian"，

如果原来没有，那么自己添加：

<div id="biaoqian"> 里面是你的侧边栏某一块内容代码 </div>

另一个也类似，<div id="suiji"> 里面是你的侧边栏某一块内容代码 </div>

另外别加太多，防止太长了，不好看，影响美观。

好啦，就这么简单啦。。呵呵。。这个效果主要就是浏览者在浏览比较长的网页的时候，可以在侧边显示你想要内容，不让侧边一片空白，换句话说，让你的页面没有多余的空白之处，增加浏览体验，具体效果可以看本站的typecho系统blog.xptt.com 或则本站侧边栏。

图片失效

你的侧边栏还能在页面最下面的地方显示出来么？呵呵。

赏