让你的侧边栏滚动起来

自从看到“我爱水煮鱼”网站的侧边滚动功能(效果可以在本站看到了,滚动到下面,观察下侧边栏),我就觉得很实用,文章内容长的时候不会让你很郁闷的看到侧边的空白,当天就为了这个效果去搜索,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. 你自己用的这种效果的JS代码我已经在别人的博客里找到了,找到后在你调用的jquery_cmhello.js文件里也找到了,对比了之后发现是一模一样的代码。。呵呵。。 [痛苦] [痛苦] 现在只有一个问题就是我用的模板右侧模块全部是直接调用的后台小工具,sidebar.php文件里是这种形式的

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

    16F
  2. 原来这里是贴不了代码的 [困惑]

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

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

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

    20F

Leave a Reply to 郑 永

gravatar

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