JQuery侧边栏滚动

本站长期承接广告、付费链接、软文之类，如有需要请联系野鹤！

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

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

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

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

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

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

$(function() {
var $sidebar = $(“#text-3″),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});

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

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

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

无纺布网
写得很好，难得看到这样的好文章

2010年12月17日 11:22 | 回复 41楼
无纺布网
这文章写得太好了

2010年12月17日 11:22 | 回复 42楼
JaCall
博客好东西很多！

请问博主的相册是插件还是什么？

2011年02月22日 14:11 | 回复 43楼
- 野鹤
  @JaCall相册是插件，不过现在已经不用了
  
  2011年03月14日 22:34 | 回复
asics high
体验了下下还是很不错的哦

2011年03月12日 09:43 | 回复 44楼
Santa Clarita loans
Rss seriously is not working in chrome, I implore you to repair it.

2011年03月14日 20:33 | 回复 45楼
- 野鹤
  @Santa Clarita loansthanks
  
  2011年03月14日 22:34 | 回复
番茄
这种效果还是慢不错的哦，我想试试看。

2011年03月14日 22:03 | 回复 46楼
- 野鹤
  @番茄呵呵，修改主题之前要备份
  
  2011年03月14日 22:36 | 回复
  - 番茄
    @野鹤要实现右边滚动的效果不简单，不过我觉得左边的这个上下滚动效果确实很到位，不知能否告知一下相关插件或者代码？
    
    2011年03月15日 22:05 | 回复
    - 野鹤
      @番茄代码我好像发过，你看这个文章blog.xianyunyehe.net/781
      
      2011年03月15日 22:08 | 回复
      - 番茄
        @野鹤谢谢，我来折腾一下吧，不知道能不能弄好。
        
        2011年03月16日 00:25 | 回复
        
        野鹤
        @番茄多谷歌一下就好了
        
        2011年03月16日 09:16 | 回复
asics high
这种效果还是慢不错的

2011年03月15日 17:12 | 回复 47楼
沉冰浮水
z-blog文章页里不行。。。也就是说如果之前有JS生成的元素的话会影响数值的计算。。不知道要怎么解决。。
———-
泯灭

2011年03月20日 16:42 | 回复 48楼
- 野鹤
  @沉冰浮水不应该啊，这个应该是通用的。
  
  2011年03月20日 18:20 | 回复
jeans outlet
I like the article because it is not only the informative ，but also the interesting.

2011年04月6日 09:53 | 回复 49楼
sailor
这个效果很不错，你现在这个评论窗口是不是也用的这个效果啊～～～

2011年08月21日 22:50 | 回复 50楼
- 野鹤
  @ sailor ：是的，现在已经用到评论窗口了
  
  2011年08月21日 22:50 | 回复