让你的侧边栏滚动起来

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

    沙发!
  2. 貌似位置不是很好,这样起不到很好的导航作用

    板凳!
  3. 这个功能不错呢,很实用

    地板!
  4. 很炫 评论框的文字怎么加?

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

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

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

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

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

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

    8F
  9. 还真有这种效果呢,不错

    9F
  10. 这个不错啊~试试看也加到我的里面~

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

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

    12F
  13. 没有,哈哈。。。

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

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

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

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

    16F
  17. 原来这里是贴不了代码的 :?:

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

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

    19F
  20. 这个功能可以有。

    20F

怎么样?你也说一句吧!

gravatar

汗 色 悲 闭嘴 调皮 笑 惊 亲 雷 馋 晕 酷 奸 怒 狂 萌 吃 贪 囧 羞 哭