直接入题!

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

好吧,昨天写了这个东西,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不能重复使用)。

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. Oracle 中的Userenv()

    1.USEREVN() 返回当前用户环境的信息,opt可以是:ENTRYID,SESSIONID,TERMINAL,ISDBA,LABLE,LANGUAGE,CLIENT_INFO,LANG,VSIZ ...

  2. 初识nginx+tomcat

    百度百科说: Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.Nginx是由Igor Sysoev为俄罗斯 ...

  3. HDU 5794 - A Simple Chess

    HDU 5794 - A Simple Chess题意: 马(象棋)初始位置在(1,1), 现在要走到(n,m), 问有几种走法 棋盘上有r个障碍物, 该位置不能走, 并规定只能走右下方 数据范围: ...

  4. 克隆虚拟机后修改MAC地址

    克隆后的主机找不到eth0 修改 /etc/udev/rules.d/70-persistent-net.rules 删除原eth0的信息,将eth1的name改为eth0 修改 /etc/sysco ...

  5. zz[C++]合理的设计和使用消息队列

    http://www.cnblogs.com/egmkang/archive/2012/11/17/2763295.html 生产者消费者问题,是永远的经典. 单纯让多个线程去竞争,占有资源然后处理, ...

  6. Gallery过时替代方案HorizontalScrollView

    布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:androi ...

  7. [makefile] filter-out

    $(filter-out ,) 名称:反过滤函数——filter-out.功能:以模式过滤字符串中的单词,去除符合模式的单词.可以有多个模式.返回:返回不符合模式的字串.示例: objects=mai ...

  8. 表达式 - PHP手册笔记

    PHP是一种面向表达式的语言.表达式的定义可以描述为,任何有值的东西. PHP支持全等运算符===(值和类型均相同)和非全等运算符!==(值或者类型不同). PHP的三元条件运算符貌似和C语言不太一样 ...

  9. Java GC机制和对象Finalize方法的一点总结

    GC是垃圾收集的意思(Garbage Collection),内存处理是编程人员容易出现问题的地方,忘记或者错误的内存回收会导致程序或系统的不稳定甚至崩溃,Java提供的GC功能可以自动监测对象是否超 ...

  10. Oracle EBS-SQL (BOM-17):检查8层BOM.sql

    define item1="1234567890" select a1.产品编码, a1.产品描述, '1层'         层数, a1.物料编码, a1.物料描述, a1.单 ...