JQuery侧边栏滚动

这几天去阿邙同学那里搞到了一个好玩的效果,已经用到我的博客上了,就是这个JQuery侧边栏随窗口滚动效果!有很多朋友都问我,我一遍又一遍的说:”这个是从阿邙同学那里搞到的,去看看吧!”,但是我估计阿邙同学有的没有说明白吧,我在这里再说一遍吧!

效果见下图,随着侧边栏滚动!

不管你滚动到那里,我的那个赞助商的广告都会显示的!对了,我还有广告位没有卖出去呢,不知道有谁对这感兴趣!好了,转到代码部分吧!

阿邙同学在文章里面首先写的是他的css代码!这个因为他是专门又做了一个sidebar,就是下图这个部分!

因为我调用的是我后台小工具,所以就没有写css了!用firebug看看我那个小工具的ID吧,以后JQuery代码要选择的!还有,要滚动的这个小玩意,必须在最后面的,如果我要想滚动我的友情链接,那就得放在最下面了!

text-3,这个就是选择要动的玩意了!JQuery代码如下:

JS
  1. $(function() {  
  2. var $sidebar = $(“#text-3″),  
  3. $window = $(window),  
  4. offset = $sidebar.offset(),  
  5. topPadding = 15;  
  6. $window.scroll(function() {  
  7. if ($window.scrollTop() > offset.top) {  
  8. $sidebar.stop().animate({  
  9. marginTop: $window.scrollTop() - offset.top + topPadding  
  10. });  
  11. } else {  
  12. $sidebar.stop().animate({  
  13. marginTop: 0  
  14. });  
  15. }  
  16. });  
  17. });  

OK,就这样了,我就是这么实现的,如果有不懂的,可以问阿邙,如果阿邙不在,可以给他留言骚扰他!

支付宝担保交易购买 博客新手计划：域名+空间=100元

本文写于2010-08-17，采用 【BY-NC-SA】 进行授权。Tags : , ,


120 次评论 (访客:67 次, 博主:52 次, 引用:1 次)

  1. avatariamlukas

    来支持下技术男，点下广告

    2010年08月20日 14:38 | 回复  31楼 
  2. avatar右脑开发

    今天GG变成绿色了~~~真是~
    不过~侧边滚动的那个还挺可爱的

    2010年08月20日 14:38 | 回复  32楼 
  3. avatarC度空间

    再来看看。。点点

    2010年08月21日 12:41 | 回复  33楼 
  4. avatar有点蓝

    现在这种jquery和ajex效果都好流行啊

    2010年08月21日 17:58 | 回复  34楼 
  5. avatar两天

    我坦白，没看懂。。。。 :arrow:

    2010年08月23日 12:54 | 回复  35楼 
  6. avatarhcc

    其实我也没看懂

    2010年08月25日 08:07 | 回复  36楼 
  7. avatarNikeAirMax

    这是我进的第三个情侣博客哦…关于侧边栏滚动的这篇还是不太懂呢

    2010年08月26日 09:08 | 回复  37楼 
  8. avatarairmaxshoes

    刚刚用鼠标点了一下，确实蛮有趣的

    2010年09月8日 14:20 | 回复  38楼 
  9. avatarMr.Chen

    学习了

    2010年09月17日 21:12 | 回复  39楼 
  10. avatarAfio

    那个，代码背景是怎么实现的？

    2010年11月16日 20:54 | 回复  40楼 

:?: :razz: :!: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :idea: :arrow: :neutral: :cry: :mrgreen: :smile: :evil:

Trackbacks and Pingbacks: