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

看题目不知道大家是否明白过来了,不明白的,那么请看本站侧边栏,拉到页面下面的效果,上次妈咪中国问我页面在滚动到下面的时候,如何实现侧边跟随滚动,对与这个问题其实之前也有不少网友问过我,我的直接回答是去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 或则本站侧边栏。

图片失效

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

分类:网络博客 标签:,,,

上一篇:关于刘翔,关于奥运

下一篇:公车wifi速度真不赖

已经有26条评论!

Loading...
  1. 没有试过,有时间来试试

    16F
  2. 我去试试去 这个应该挺不错的

    17F
  3. 马克,刚才看刘因的博客还说要这个代码的,你这里倒提供了,我收藏一下 加回去。

    18F
  4. 1.8.3以上的jquery效果会失效

    19F

Leave a Reply to 郑永

gravatar

冷笑 忧伤 恶魔 笑脸 红脸 咧嘴笑 吃惊 惊讶 困惑 耍酷
大笑 抓狂 痛苦 转眼珠 眨眼 好主意 囧 无表情 哭泣 坏笑