直接入题!

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

好吧,昨天写了这个东西,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. visual studio 2015 修改类class 文件模板

    第一步:找到模板文件 路径:C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\ItemTemplates\CSharp\C ...

  2. 【转】获取CID 和 LAC的方法

    原文地址:http://stackoverflow.com/questions/13399659/get-cellid-mcc-mnc-lac-and-network-in-ios-5-1 在iOS5 ...

  3. c#中的peek()方法

    peek()方法用来判断文件是否读取完成,如果完成的话,就会有一个返回值 - 1 所以可以用streamreader的对象sr调用peek()方法来判断文件流是否读取完成 ) { Console.Wr ...

  4. C# 添加服务引用。

    1,服务引用给的实例(需要一个网址连接) http://192.168.17.131:12170/amtiot.gis.WCF/SpatialAnalysis.svc  (类似于这样的一个网址) 在网 ...

  5. mysql拒绝访问(Error 1044/1045)问题的解决

    遇到此问题 一般是权限问题 修改权限即可 然后用grant命令下放权限. GRANT ALL PRIVILEGES ON *.* TO root@localhost IDENTIFIED BY 'ro ...

  6. mysql隔离级别的设置和检索

    001.设置方式: 001.在/etc/my.cnf配置文件中设置,这个格式一定要记清楚呀! transaction-isolation=READ-COMMITTED 这里要写在“-”号不是“_&qu ...

  7. 混合使用Azure LB和ILB访问相同web服务(1)

    在经典的使用场景中,我们一般使用AzureLoadBalancer来面向公网提供负载均衡服务,而使用Azure Internal Load Balancer提供内部那些不愿意将服务暴露给公网的服务,比 ...

  8. Android事件侦听器回调方法浅谈

    http://developer.51cto.com/art/201001/180846.htm Android事件侦听器作为视图View类的接口,其中包含有不少回调方法,比如:onClick():o ...

  9. NFC扫描

    目录(?)[-] 简介 什么是NFC 标签和读取器 标签 读取器 NFC模式 通信模式 主动模式 被动模式 操作模式 读写 点对点 模拟卡片 NFC用例 用于启动服务 用于分享 用于连接设备 用于买票 ...

  10. Starling开发微信打灰机(二)

    上一篇中,已经把starling开发环境搭建好,那么现在开始写代码. 这一篇来完成打灰机的欢迎界面. 游戏素材下载 首先创建Asset.as来加载图片,声音和字体等资源,其中只有两张背景图是单独的图片 ...