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

网络博客 郑永 12197℃ 26评论 单栏模式

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

图片失效

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

转载请注明:郑永博客 » 实现侧边栏滚动之填补空白

历史上的今天:

(26)个小伙伴在吐槽
Loading...
  1. 分文博客2012-08-17 00:35 Google Chrome 21 Windows XP 回复

    额 这个不错啊 但其实更喜欢那种静止在顶部的效果 像卢松松的就是

    沙发!
  2. 北京代理记账2012-08-19 10:56 Firefox 14 Windows 7 回复

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

    板凳!
  3. 刘印博客2012-08-19 15:11 Google Chrome 18 Windows 7 回复

    原来是这么玩的,我留言很多可以弄个~

    地板!
  4. 公子2012-08-20 13:00 ChromePlus 1 Windows XP 回复

    :twisted: :twisted: :twisted: mark。。。

    4楼
  5. p57官方网站2012-08-21 06:53 Firefox 14 Windows 7 回复

    过来看看了。不错啊!

    5楼
  6. zwwooooo2012-08-21 15:07 Firefox 14 Windows 7 回复

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

    6楼
  7. 九块邮2012-08-22 09:38 Google Chrome 20 Windows XP 回复

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

    7楼
  8. 第9空间2012-08-25 02:09 Internet Explorer 9 Windows 7 回复

    呵呵。。。辛苦了~~收藏一下。。。

    8楼
  9. 户外探索者2012-08-25 09:21 Google Chrome 18 Windows 7 回复

    真心不错,学习了

    9楼
  10. huangjun2012-08-26 12:08 Maxthon 2 Windows XP 回复

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

    10楼
    • 郑永2012-08-30 17:40 Firefox 15 Windows XP 回复

      呵呵,好眼力。可以拍下来,哈哈。

  11. 1616682012-08-28 03:43 TheWorld Browser Windows 7 回复

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

    11楼
  12. 死亡之鹰2012-08-30 02:13 Google Chrome 22 Windows 7 回复

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

    12楼
  13. wordpress教程2012-09-04 02:17 Internet Explorer 8 Windows XP 回复

    我也想弄了。

    13楼
  14. 农夫三拳2012-09-07 13:29 Internet Explorer 8 Windows XP 回复

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

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

    14楼
    • 郑永2012-09-08 19:44 Firefox 15 Windows XP 回复

      在你最后一块的侧边栏最后加上如下代码,你自己看一下你的侧边的块,比如 某几块的后面。

  15. ubs2012-09-07 15:29 Internet Explorer 9 Windows 7 回复

    :cry: 博主老大 求助下啊 我没弄成功啊

    15楼
    • 郑永2012-09-08 19:44 Firefox 15 Windows XP 回复

      慢慢来,哈哈,你会的。

  16. 伊美网2012-09-24 13:57 Internet Explorer 9 Windows 7 回复

    没有试过,有时间来试试

    16楼
  17. 策划那些事儿2012-10-28 10:20 Firefox 16 Windows 7 回复

    我去试试去 这个应该挺不错的

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

    18楼
  19. 叶子天堂2013-03-01 02:50 Google Chrome 25 Windows 7 回复

    1.8.3以上的jquery效果会失效

    19楼
gravatar
发表我的评论
取消评论


Hi,请填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址