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. 额 这个不错啊 但其实更喜欢那种静止在顶部的效果 像卢松松的就是

    沙发!
  2. 喜欢博主的文章,想创业或注册公司,欢迎访问我们北京清平源会计服务有限公司,提供代理记账、工商注册、代理社保、税务筹划等专业会计服务!

    板凳!
  3. 原来是这么玩的,我留言很多可以弄个~

    地板!
  4. 过来看看了。不错啊!

    5F
  5. 这个可以有,特别是侧边栏比较长的,哈

    6F
  6. 喜欢这种功能,用户体验比较好,否则这边空一大块,感觉非常不错!收藏你的博客了!

    7F
  7. 呵呵。。。辛苦了~~收藏一下。。。

    8F
  8. 真心不错,学习了

    9F
  9. 我看到你博客的效果,右侧就是停在最后一个随机文章了。

    10F
  10. 文章非常不错,学习了,谢谢分享~

    11F
  11. 问一下,你发现过HCMS主题能用的缩放软件了吗

    12F
  12. 博主你好,很喜欢你的技术贴,这里我想问下
    在你最后一块的侧边栏最后加上如下代码:

    这句话应该加在哪呀?可以给我举个例子吗?这里先谢了···

    14F
  13. ubs

    [哭泣] 博主老大 求助下啊 我没弄成功啊

    15F

怎么样?你也说一句吧!

gravatar

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