n

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

朗读这篇文章

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

怎么样?你也说一句吧!

gravatar

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