域名注册

• 中文域名
• 英文域名
• 通用网址
• 域名解析
• 域名转入\转出

虚拟主机

• 主机购买
• 管理主机
• FTP上传
• 数据库管理
• 主机续费升级

网站建设

• 建站流程介绍
• 网站设计
• 网站改版
• 网站维护
• 网站推广

企业邮局

• 邮箱使用
• 管理邮箱
• 邮箱续费升级
• 全球邮局

网站优化

• seo优化
• seo技巧
• 收索引擎优化
• 关键词优化

网站备案

• 备案流程指南
• 修改备案
• 备案资料下载
• 备案小技巧

服务器租用

• 服务器租用
• 服务器托管

其它服务

• 400电话
• 在线客服
• 财务常见问题
• 会员常见问题

• 您现在的位置： 创新互联 >> 网站建设 >> 网络建设常见问题 >> jQuery 随滚动条滚动效果代码

jQuery 随滚动条滚动效果代码

• 作者：曾小姐 文章来源：成都网站建设 点击数：2161 更新时间：2012-06-28
• 下面由成都创新互联网站建设分享两款关于jQuery随滚动条滚动代码，一个适用于固定版长度的文章，一个适用于内容页长文章，有需要的朋友可能参考参考哦，您也可以登录我们的论坛（http://bbs.cdxwcx.com）来和更多的网站爱好者进行交流！
  jQuery 随滚动条滚动效果 （固定版）
  代码（基于jQuery）：

  代码如下

  //侧栏随动 var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动  rollSet = $('.search,.weibo,.group,.feed-mail,.tags'); //添加rollStart之前的随动区块 rollStart.before('<div class="da_rollbox" style="position:fixed;background-color:#fff;width:inherit;"></div>'); var offset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev(); objWindow.scroll(function() {  if (objWindow.scrollTop() > offset.top){   if(rollBox.html(null)){    rollSet.clone().prependTo('.da_rollbox');   }   rollBox.show().stop().animate({top:0,paddingTop:15},400);  } else {   rollBox.hide().stop().animate({top:0},400);  } });

  比上个更简单了，请留意注释的地方，是需要根据你的需求添加模块class或者id的。值得注意的是第五行的背景色，默认是白色！

  Tips：IE6的粉丝可以加些不支持fixed的代码

  jQuery 随滚动条滚动效果 （适用于内容页长文章）
  jQuery滚动随动区块，代码如下：

  代码如下

  //侧栏随动 var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动  rollOut = $('.cookie-list'); //隐藏rollStart之后的区块 rollStart.before('<div class="da_rollbox"></div>'); var offset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev(),  rollSet = $('.search,.weibo,.group'); //添加rollStart之前的随动区块 objWindow.scroll(function() {  if (objWindow.scrollTop() > offset.top){   if(rollBox.html(null)){    rollSet.clone().prependTo('.da_rollbox');   }   rollOut.fadeOut();   rollBox.show().stop().animate({marginTop: objWindow.scrollTop() - offset.top + 20},400);  } else {   rollOut.fadeIn();   rollBox.hide().stop().animate({marginTop:0},400);  } });

  代码中已有完整注释，只需要写上几个class或者id（最好不要是id，w3c规定id不能重复使用）

• 上一篇文章：js实现城市级联选择实现代码
  下一篇文章：wordpress中缩略图调取几种方法