郑永博客

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

除非注明，郑永博客文章均为原创，转载请以链接形式标明本文地址

本文地址：http://www.xptt.com/to-roll-up-your-sidebar.html