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

2012年8月16日23:26:01 26 12,655

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

图片失效

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

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:26   其中:访客  20   博主  6

    • 分文博客 5
      Google Chrome 21 Windows XP

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

      • 北京代理记账 0
        Firefox 14 Windows 7

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

        • 刘印博客 4
          Google Chrome 18 Windows 7

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

          • 公子 0
            ChromePlus 1 Windows XP

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

            • p57官方网站 0
              Firefox 14 Windows 7

              过来看看了。不错啊!

              • zwwooooo 9
                Firefox 14 Windows 7

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

                  • 郑永 Admin
                    Firefox 14 Windows XP

                    恩,很实用。

                    @zwwooooo

                  • 九块邮 0
                    Google Chrome 20 Windows XP

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

                      • 郑永 Admin
                        Firefox 14 Windows XP

                        呵呵,正解。

                        @九块邮

                      • 第9空间 2
                        Internet Explorer 9 Windows 7

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

                        • 户外探索者 1
                          Google Chrome 18 Windows 7

                          真心不错,学习了

                          • huangjun 6
                            Maxthon 2 Windows XP

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

                              • 郑永 Admin
                                Firefox 15 Windows XP

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

                                @huangjun

                              • 161668 1
                                TheWorld Browser Windows 7

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

                                • 死亡之鹰 1
                                  Google Chrome 22 Windows 7

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

                                  • wordpress教程 2
                                    Internet Explorer 8 Windows XP

                                    我也想弄了。

                                    • 农夫三拳 0
                                      Internet Explorer 8 Windows XP

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

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

                                        • 郑永 Admin
                                          Firefox 15 Windows XP

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

                                          @农夫三拳

                                        • ubs 0
                                          Internet Explorer 9 Windows 7

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

                                            • 郑永 Admin
                                              Firefox 15 Windows XP

                                              慢慢来,哈哈,你会的。

                                              @ubs

                                            • 伊美网 0
                                              Internet Explorer 9 Windows 7

                                              没有试过,有时间来试试

                                              • 策划那些事儿 1
                                                Firefox 16 Windows 7

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

                                                • 红铜时代朱贺锋 1
                                                  Google Chrome 21 Windows XP

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

                                                  • 叶子天堂 1
                                                    Google Chrome 25 Windows 7

                                                    1.8.3以上的jquery效果会失效