让你的侧边栏滚动起来

网络博客 郑永 18946℃ 43评论 单栏模式

自从看到“我爱水煮鱼”网站的侧边滚动功能(效果可以在本站看到了,滚动到下面,观察下侧边栏),我就觉得很实用,文章内容长的时候不会让你很郁闷的看到侧边的空白,当天就为了这个效果去搜索,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。(效果可以查看本站的主页和文章页面的不同侧边效果)。

转载请注明:郑永博客 » 让你的侧边栏滚动起来

历史上的今天:

(43)个小伙伴在吐槽
Loading...
  1. 万戈2010-04-05 00:04 Firefox 3 Windows XP 回复

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

    沙发!
    • 郑 永2010-04-05 00:10 Firefox 3 Windows 7 回复

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

  2. 鲍捷2010-04-05 08:38 Google Chrome 4 Windows XP 回复

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

    板凳!
    • 郑 永2010-04-05 12:28 Firefox 3 Windows XP 回复

      没听明白,什么位置?

  3. 南京蚂蚁2010-04-05 08:40 Google Chrome 4 Windows XP 回复

    这个功能不错呢,很实用

    地板!
    • 郑 永2010-04-05 12:28 Firefox 3 Windows XP 回复

      呵呵,那也折腾下咯。

  4. Eisen2010-04-05 02:45 Google Chrome 5 Windows XP 回复

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

    4楼
    • 郑 永2010-04-05 05:58 Firefox 3 Windows 7 回复

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

  5. zwwooooo2010-04-05 04:35 Firefox 3 Windows 7 回复

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

    5楼
    • 郑 永2010-04-05 05:54 Firefox 3 Windows 7 回复

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

  6. 林木木2010-04-05 05:27 Mozilla Compatible iPad 回复

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

    6楼
    • 郑 永2010-04-05 05:56 Firefox 3 Windows 7 回复

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

  7. 林木木2010-04-05 07:14 Google Chrome 4 Windows 7 回复

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

    7楼
    • 郑 永2010-04-05 12:26 Firefox 3 Windows XP 回复

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

  8. alluse2010-04-05 12:26 Maxthon 2 Windows XP 回复

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

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

    8楼
    • 郑 永2010-04-05 12:30 Firefox 3 Windows XP 回复

      谢谢指点 :)

  9. 风舞清扬2010-04-06 02:33 Firefox 3 Windows 7 回复

    还真有这种效果呢,不错

    9楼
    • 郑 永2010-04-06 03:15 Firefox 3 Windows 7 回复

      是的,谢谢

  10. bobsheep2010-04-07 06:21 Firefox 3 Windows XP 回复

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

    10楼
    • 郑 永2010-04-07 17:16 Firefox 3 Windows XP 回复

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

  11. 阿修2010-04-16 01:01 Google Chrome 5 Windows XP 回复

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

    11楼
    • 郑 永2010-04-16 02:23 Firefox 3 Windows 7 回复

      好提议,呵呵 :)

  12. 九江网2012-07-08 08:09 TheWorld Browser Windows XP 回复

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

    12楼
  13. 郑永2012-07-09 14:42 Firefox 13 Windows XP 回复

    没有,哈哈。。。

    13楼
    • 九江网2012-07-17 08:41 TheWorld Browser Windows XP 回复

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

    • 郑永2012-07-17 13:56 Firefox 13 Windows XP 回复

      呵呵。。。

  14. 第9空间2012-08-01 20:17 360Safe Explorer Windows 7 回复

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

    14楼
    • 郑永2012-08-04 22:59 Google Chrome 20 Windows XP 回复

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

    • 第9空间2012-08-05 03:10 Google Chrome 20 Windows 7 回复

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

    • 郑永2012-08-06 04:05 Firefox 14 Windows XP 回复

      晚上发给你 :)

    • 银月2012-09-02 09:19 Google Chrome 23 Windows 7 回复

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

    • 郑永2012-09-04 00:22 Firefox 15 Windows XP 回复

      已经有啦。

    • 银月2012-09-04 12:07 Internet Explorer 9 Windows 7 回复

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

  15. 第9空间2012-08-05 03:21 Google Chrome 20 Windows 7 回复

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

    15楼
  16. 第9空间2012-08-05 07:39 Google Chrome 20 Windows 7 回复

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

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

    16楼
    • 郑永2012-08-06 04:06 Firefox 14 Windows XP 回复

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

  17. 第9空间2012-08-05 07:41 Google Chrome 20 Windows 7 回复

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

    17楼
  18. 番茄2012-09-26 16:00 Firefox 16 Windows XP 回复

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

    18楼
  19. 阿威2012-10-17 06:33 Google Chrome 22 Windows 7 回复

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

    19楼
    • 郑永2012-10-18 13:09 Firefox 16 Windows XP 回复

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

    • 郑永2013-01-16 13:52 Firefox 18 Windows XP 回复

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

  20. slink2012-11-13 16:07 Google Chrome 23 Windows 7 回复

    这个功能可以有。

    20楼
    • 郑永2012-11-13 17:01 Firefox 16 Windows XP 回复

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

gravatar
发表我的评论
取消评论


Hi,请填写昵称和邮箱!

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