直接入题!

当内容页比较长的时候,网站右侧一直是空白,不如放点有用的东西给用户看,最好不要放广告,因为那样很邪恶,你懂的。

好吧,昨天写了这个东西,jQuery滚动随动区块,代码如下:

  1. //侧栏随动
  2. var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动
  3. rollOut = $('.cookie-list'); //隐藏rollStart之后的区块
  4.  
  5. rollStart.before('<div class="da_rollbox"></div>');
  6.  
  7. var offset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev(),
  8. rollSet = $('.search,.weibo,.group'); //添加rollStart之前的随动区块
  9.  
  10. objWindow.scroll(function() {
  11. if (objWindow.scrollTop() > offset.top){
  12. if(rollBox.html(null)){
  13. rollSet.clone().prependTo('.da_rollbox');
  14. }
  15. rollOut.fadeOut();
  16. rollBox.show().stop().animate({marginTop: objWindow.scrollTop() - offset.top + 20},400);
  17. } else {
  18. rollOut.fadeIn();
  19. rollBox.hide().stop().animate({marginTop:0},400);
  20. }
  21. });

  码中已有完整注释,只需要写上几个class或者id(最好不要是id,w3c规定id不能重复使用)。

jQuery 随滚动条滚动效果 (适用于内容页长文章)的更多相关文章

  1. jQuery 随滚动条滚动效果 (固定版)

    //侧栏随动 var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动 rollSet = $('.search,.weibo,.group,.feed-mai ...

  2. jquery控制div随滚动条滚动效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery div随滚动条 ...

  3. javascript实现 滚动条滚动 加载内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jquery 禁止滚动条滚动,并且滚动条不消失,页面大小不闪动

    一,禁止滚动,滚动条不消失,页面大小不闪动 //禁止滚动条滚动 function unScroll() { var top = $(document).scrollTop(); $(document) ...

  5. jQuery仿百度帖吧头部固定不随滚动条滚动效果

    <style> *{margin:0px;padding:0px;} div.nav{background:#000000;height:57px;line-height:57px;col ...

  6. jquery操作滚动条滚动到指定元素位置 scrollTop

    $('.brand_t a').bind('click',function(){ if($(this).attr('title1')){ var toChar = $(this).attr('titl ...

  7. Jquery 文字上下滚动效果示例代码

      <!doctype html>   <html>   <head>   <meta charset="utf-8">       ...

  8. JQuery控制滚动条滚动到指定位置

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. jquery操作滚动条滚动到指定位置

    <html><head><script type="text/javascript" src="/jquery/jquery.js" ...

随机推荐

  1. Reverse Words in a String (JAVA)

    Given an input string, reverse the string word by word. For example,Given s = "the sky is blue& ...

  2. PHP基础之 define() 函数

    定义和用法 define() 函数定义一个常量. 常量类似变量,不同之处在于: 在设定以后,常量的值无法更改 常量名不需要开头的美元符号 ($) 作用域不影响对常量的访问 常量值只能是字符串或数字 语 ...

  3. B - Maya Calendar(第二季水)

    Description During his last sabbatical, professor M. A. Ya made a surprising discovery about the old ...

  4. IE6、7 a链接内图片加滤镜后导致a标签链接失效问题解决

    今天在项目中遇到一个ie6.7浏览器下a链接失效的问题,查询大量资料,最终找到完美的解决方案,如下: 解决方法: 为a标签加样式{*background:url(#);*zoom:1;} 为img外部 ...

  5. 理解javascript 回调函数

    ##回调函数定义 百度百科:回调函数 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不 ...

  6. iOS绘制view

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  7. 使用SelectClipRgn注意事项

    SelectClipRgn 函数功能:该函数选择一个区域作为指定设备环境的当前剪切区域. 函数原型:int SelectClipRgn(HDc hdc, HRGN hrgn): 参数: hdc:设备环 ...

  8. MYSQL truncate table

    准备: 要说truncate table 就要先说一下delete 它们两个都可以用来从表中删除数据行!表面上看是delete 删除的慢一些,truncate table 快一些. delete : ...

  9. QProgressBar和QProgressDialog的简单实用

    在QT中可以用QProgressBar或着QProgressDialog来实现进度条. QProgressBar的使用 首先在designer中拖一个按钮和进度条部件,按下面初始化 ui->pr ...

  10. html5本地存储 local storage

    HTML5 web storage, a better local storage than cookies. With HTML5, web pages can store data locally ...