n

让你的侧边栏滚动起来

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

分类:网络博客 标签:,,,,

上一篇:阿根廷人去美国签证流程(二)

下一篇:Post Views plus 统计异常问题

已经有41条评论!

Loading...
  1. 实现了?哈哈,相当不错啊

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

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

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

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

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

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

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

    6F
  7. 恩,不过用多了,怕影响速度,呵呵

    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

怎么样?你也说一句吧!

gravatar

冷笑 忧伤 恶魔 笑脸 红脸 咧嘴笑 吃惊 惊讶 困惑 耍酷
大笑 抓狂 痛苦 转眼珠 眨眼 好主意 囧 无表情 哭泣 坏笑