让你的侧边栏滚动起来

  • A+
所属分类:网络博客

自从看到“我爱水煮鱼”网站的侧边滚动功能(效果可以在本站看到了,滚动到下面,观察下侧边栏),我就觉得很实用,文章内容长的时候不会让你很郁闷的看到侧边的空白,当天就为了这个效果去搜索,google了大半天,没有结果。心想难道我爱水煮鱼使用的这个方法是国外看到的?于是,就把所有关键字都改成了英文,马上就有结果了,看到老外的博客介绍如何制作,但似乎非常复杂,可以能是解释的太清楚,看不到具体方法,另外也有一篇,但是可能他们不是通过jquery实现的,又或则是英语和代码合起来,实在看不懂,于是就放弃了,后来觉得万戈兄弟是个代码折腾狂,就到万戈兄弟那里去求助,希望他能帮忙实现这个功能,万戈兄弟到最后给我一个网址,说木木兄弟既然有类似功能的方法,就不再研究了,我进入木木jQuery 折腾小记,看到两篇类似效果但只是仅仅擦边而已,比如:《牛X的导航栏》《“返回顶部”加强版》,都是利用到jquery的神奇功能,要具体实现的话,那些代码肯定要有个大变化,想了半天,还是觉得应该回到我爱水煮鱼的网站去研究,不相信搞不出来,最后决定折腾。
那天看了我爱水煮鱼的网站源代码,看到他的侧边是用:#subcontent ,以为需要特制的侧边,因为一般的侧边都是#sidebar,就这样,我把这个侧边想像的太复杂了,今天又回到他的网站去研究,刚开始傻傻的把这个功能所涉及到得css样式和jquiery代码全部复制过来,终于实现了,太高兴了。接着就发现在ie下简直乱套了,侧边栏跑到底部去了,在火狐狸浏览器里倒是实现了效果,不过还是有点不一样,就是当滚动条滑到下面的时候,侧边栏马上就往下滑,这样看不到侧边栏下面的内容,只适合那种把侧边栏缩小到适合屏幕没有多余内容的侧边,那不是严重影响了侧边栏的使用,所有的这些错误都是因为我把sidebar用<div id=subcontent></div>包起来,就是照抄我爱水煮鱼的侧边样式。其实只要一步,就能模仿我爱水煮鱼的方法了,哈哈,真实郁闷,是我想多了,不过不折腾也得不到经验。一句一句的删除,才知道哪段代码才是实现这个效果最重要的一步。
ok,过程废话完了,下面把这个效果分享一下,代码:
首先,你先修改你的sidebar.php,<div id="sidebar" style="position:relative;"> 加上加粗的这段代码就OK了。就因为这个是关键,刚开始我不知道,所以才用<div id=subcontent></div>把我的sidebar包起来,后来才发现,原来就是这个起到关键作用。
接着:打开header.php,在末尾加上如下代码:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
$("#navigation ul li").hover(function(){
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
}, function(){
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
});
$("#navigation ul li ul li:has(ul)").find("a:first").append(" &raquo; ");
scroll_sidebar(200);
});
function scroll_sidebar(duration){
var sidebar = $("#sidebar");
var sidebar_top = sidebar.offset().top;
var sidebar_height = sidebar.height();
if($(window).height() > sidebar_height) {
if($(window).scrollTop() > sidebar_top){
sidebar.animate({top : $(window).scrollTop() - sidebar_top +"px" },{ duration:duration || 350 , queue:false });
}
$(window).scroll(function (){
if($(window).scrollTop() > sidebar_top ){
sidebar.animate({top : $(window).scrollTop() - sidebar_top +"px" },{ duration:duration || 350 , queue:false });
}else{
sidebar.animate({top : 0 },{ duration:duration || 350 , queue:false});
}
});
}else{
if($(window).scrollTop() > sidebar_top + 10 + sidebar_height - $(window).height()){
sidebar.animate({top : $(window).scrollTop() - sidebar_top - (sidebar_height - $(window).height()) +"px" },{ duration:duration || 350 , queue:false });
}
$(window).scroll(function (){
if($(window).scrollTop() > sidebar_top + sidebar_height - $(window).height()){
sidebar.animate({top : $(window).scrollTop() - sidebar_top - (sidebar_height - $(window).height()) +"px" },{ duration:duration || 350 , queue:false });
}else{
sidebar.animate({top : 0 },{ duration:duration || 350 , queue:false});
}
});
}
}
</script>

上面的代码中,#sidebar 改成你的sidebar id,上面的代码中前面部分有关提到navigation的东西,我最初把我爱水煮鱼的css样式全抄了,哈哈,其实根本没关系到,或许代码有些东西可以简化,但是关于navigation的这段代码还是相当重要的,一删除,就没那个功能了,虽然本站的navigation的CSS样式几乎没定义什么,不过能实现效果就好了,也不管那么多了。
好了,做好以上工作就算结束了,恭喜你了,最后还要感谢我爱水煮鱼发现这个功能,另外感谢万戈兄弟提醒我自己动手折腾,这个功能对你来说是不是很不错?

ps:文章页面可以把sidebar的内容搞短一些(适应屏幕为止),然后放上广告或要显示的内容,这个效果最帅的也就是这一点了,那样的话,页面上下滚动,侧边显示的都是这些内容,所以我有想过把那个tab切换效果利用在文章页面的sidebar。(效果可以查看本站的主页和文章页面的不同侧边效果)。

发表评论

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

目前评论:43   其中:访客  23   博主  20

    • 万戈 4
      Firefox 3 Windows XP

      实现了?哈哈,相当不错啊

        • 郑 永 Admin
          Firefox 3 Windows 7

          谢谢啊!!感觉挺实用的。

          @万戈

        • 鲍捷 1
          Google Chrome 4 Windows XP

          貌似位置不是很好,这样起不到很好的导航作用

            • 郑 永 Admin
              Firefox 3 Windows XP

              没听明白,什么位置?

              @鲍捷

            • 南京蚂蚁 0
              Google Chrome 4 Windows XP

              这个功能不错呢,很实用

                • 郑 永 Admin
                  Firefox 3 Windows XP

                  呵呵,那也折腾下咯。

                  @南京蚂蚁

                • Eisen 7
                  Google Chrome 5 Windows XP

                  很炫 评论框的文字怎么加?

                    • 郑 永 Admin
                      Firefox 3 Windows 7

                      就是在css里面加了一条:textarea#comment {
                      width:601px;
                      background:url(img/liuyan.png) no-repeat scroll center center;
                      } 就OK了。

                      @Eisen

                    • zwwooooo 9
                      Firefox 3 Windows 7

                      不错,不过有个建议,调节一下“动画”速度,侧边栏移动太快了,要“缓冲”一下,就行水煮鱼的那样

                        • 郑 永 Admin
                          Firefox 3 Windows 7

                          呵呵,当时在调代码,已经发现了,但是忘记改回去,速度是代码里面的scroll_sidebar(200); 原来是1000,呵呵:)1000可能是1秒吧,现在已经调回来了 :) 没错,有那种滑动感觉。

                          @zwwooooo

                        • 林木木 7
                          Mozilla Compatible iPad

                          我也是看到水煮鱼的效果经过精简和调整弄出了滑动的,侧边栏涉及到一个侧边栏长度的问题,所以要加判断比较麻烦,暂时还没折腾~~

                            • 郑 永 Admin
                              Firefox 3 Windows 7

                              呵呵,jquery的确强大啊,怪不得,你写了那么多关于运用jquery的特效。

                              @林木木

                            • 林木木 7
                              Google Chrome 4 Windows 7

                              呵呵,我都没写jQuery基本东西,因为自个儿也混的很,以为考虑写点基本的,让更多的人能折腾上jQuery,HOHO

                                • 郑 永 Admin
                                  Firefox 3 Windows XP

                                  恩,不过用多了,怕影响速度,呵呵

                                  @林木木

                                • alluse 0
                                  Maxthon 2 Windows XP

                                  $(document).ready(function(){
                                  scroll_sidebar(1000);
                                  });

                                  他前面那段保留这个就ok了!

                                    • 郑 永 Admin
                                      Firefox 3 Windows XP

                                      谢谢指点 :)

                                      @alluse

                                    • 风舞清扬 0
                                      Firefox 3 Windows 7

                                      还真有这种效果呢,不错

                                        • 郑 永 Admin
                                          Firefox 3 Windows 7

                                          是的,谢谢

                                          @风舞清扬

                                        • bobsheep 3
                                          Firefox 3 Windows XP

                                          这个不错啊~试试看也加到我的里面~

                                            • 郑 永 Admin
                                              Firefox 3 Windows XP

                                              试吧,不会错的,很好用。

                                              @bobsheep

                                            • 阿修 4
                                              Google Chrome 5 Windows XP

                                              底部加个距离吧,滑到底部把footer都遮住了~~

                                                • 郑 永 Admin
                                                  Firefox 3 Windows 7

                                                  好提议,呵呵 :)

                                                  @阿修

                                                • 九江网 5
                                                  TheWorld Browser Windows XP

                                                  兄弟加了这代码么?怎么没在头部?表示这代码真长啊…就没有精简的么。。

                                                  • 郑永 Admin
                                                    Firefox 13 Windows XP

                                                    没有,哈哈。。。

                                                      • 九江网 5
                                                        TheWorld Browser Windows XP

                                                        坑爹。。研究很久都不会。。。。。。。。。。。。

                                                        @郑永

                                                        • 郑永 Admin
                                                          Firefox 13 Windows XP

                                                          呵呵。。。

                                                          @九江网

                                                        • 第9空间 2
                                                          360Safe Explorer Windows 7

                                                          郑兄,我现在用的你的这个代码是实现了跟随滚动,但感觉一直跟着滚的话又容易分散阅读文章时的注意力。开始以为是我侧边栏太长了所以会跟随滚动的,后来删的只剩一个模块了但还是一起跟着滚动的。
                                                          我看你自己现在的侧边栏不是跟随滚动的而是固定在那的,而且是把其中的热门标签和随机文章单独拉出来固定在那,这样就比较合理,请问这个是怎么实现的呢?可以把代码放出来吗?为了这个事自己在网上折腾了十几个小时实在是没辙了,只好留言请教你了~~

                                                            • 郑永 Admin
                                                              Google Chrome 20 Windows XP

                                                              侧边栏东西放太多了,试试在滚动的那个顶部div放到最后几块去,会滚动的那个下面别跟太多东西。

                                                              @第9空间

                                                              • 第9空间 2
                                                                Google Chrome 20 Windows 7

                                                                这个模块太多的问题我也考虑到了,我之前试着把它删的只有一个模板了,但它也是跟着左侧一块滚动的,而不是像你的这样是固定在那不动的,可以把您的JS代码和sidebar的代码发给我看一下吗?发我上面的邮箱里就可以了,谢谢了 :smile:

                                                                @郑永

                                                                • 郑永 Admin
                                                                  Firefox 14 Windows XP

                                                                  晚上发给你 :)

                                                                  @第9空间

                                                                  • 银月 1
                                                                    Google Chrome 23 Windows 7

                                                                    同求您的JS代码和sidebar的代码 谢谢啦

                                                                    @郑永

                                                                    • 郑永 Admin
                                                                      Firefox 15 Windows XP

                                                                      已经有啦。

                                                                      @银月

                                                                      • 银月 1
                                                                        Internet Explorer 9 Windows 7

                                                                        邮箱里没有收到哦!95153108@qq.com

                                                                        @郑永

                                                                      • 第9空间 2
                                                                        Google Chrome 20 Windows 7

                                                                        我现在文章页的侧边栏删的只剩一屏的高度了,但它也是跟着左边滚动的,看着很晃眼,不像你的那两个模块是固定在那里

                                                                        • 第9空间 2
                                                                          Google Chrome 20 Windows 7

                                                                          你自己用的这种效果的JS代码我已经在别人的博客里找到了,找到后在你调用的jquery_cmhello.js文件里也找到了,对比了之后发现是一模一样的代码。。呵呵。。 :twisted: :twisted: 现在只有一个问题就是我用的模板右侧模块全部是直接调用的后台小工具,sidebar.php文件里是这种形式的

                                                                          这样我就不知道怎么去选取其中的部分模块固定跟随了,因为如果不使用小工具的话,我只知道标签云的调用方法是,别的模块就不知道该怎么在sidebar里面调用了。。。

                                                                            • 郑永 Admin
                                                                              Firefox 14 Windows XP

                                                                              class 名称定义,然后js调用。

                                                                              @第9空间

                                                                            • 第9空间 2
                                                                              Google Chrome 20 Windows 7

                                                                              原来这里是贴不了代码的 :?:

                                                                              • 番茄 1
                                                                                Firefox 16 Windows XP

                                                                                试过这个代码了,浮动确实可以浮动了,但不知道怎么定义相对应的小工具去浮动。

                                                                                • 阿威 0
                                                                                  Google Chrome 22 Windows 7

                                                                                  博主,您好!希望能交换个友情链接哈,你看呢,我们的博客内容\权重\PR都接近。

                                                                                    • 郑永 Admin
                                                                                      Firefox 16 Windows XP

                                                                                      待审核,希望你能先加我的,我过几天就会加你。

                                                                                      @阿威

                                                                                      • 郑永 Admin
                                                                                        Firefox 18 Windows XP

                                                                                        由于贵站无法留言,我是来通知你的,你的友情链接我删除了,经过观察,发现贵站属于采集类非站点,所以删除了友链,请原谅 :)

                                                                                        @阿威

                                                                                      • slink 1
                                                                                        Google Chrome 23 Windows 7

                                                                                        这个功能可以有。

                                                                                          • 郑永 Admin
                                                                                            Firefox 16 Windows XP

                                                                                            现在有新版的,搜索一下,就是部分滚动,有用的滚动。

                                                                                            @slink