直接入题!

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

好吧,昨天写了这个东西,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. MySql高效分页SQL

    public string GetQuerySql(ITSPAreaQueryModel model, object state = null) { ); sqlBuilder.AppendForma ...

  2. Ubuntu安装中文字体

    Ubuntu没有宋体,楷体之类的中文字体,在Libreoffice中打不出中文,-_-! 我们可以从windows中借点字体过来,哈哈. 一.准备字体 从windows7中拷贝出字体文件,拷贝的目录为 ...

  3. Asp.net SignalR 初试和应用笔记一 认识和使用 SignalR

    如果你在用QQ,微信.你会知道,广告和消息无处不在.也有好的一面,比如通过QQ或微信,微博等及时聊天功能,你找到了你的初恋,你找到了小学的班级等等. 这里的及时通信在很多应用场所能用到,比如: 1.球 ...

  4. pat_1

    2-0 2-1 #include <stdio.h> int main() { int inch,foot,cm; scanf("%d",&cm); foot= ...

  5. 简单C# 验证类

    using System; using System.Text.RegularExpressions; namespace bobomousecom.crm { /// <summary> ...

  6. 引用 - PHP手册笔记

    引用是什么 PHP中的引用意味着,用不同的变量名访问同一变量内容,类似于Unix的文件名和文件本身(变量名是目录条目,变量内容是文件本身,即用不同的目录条目访问同一文件),可以看做Unix文件系统中的 ...

  7. maven+springmvc+easyui+fastjson+pagehelper

    1.maven配置 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...

  8. sublime 控制台输入解决方案

    下面的配置是通过konsole控制台自带的参数解决了sublime不能输入的问题,这种方式适合任何一种语言 { "cmd": ["konsole"," ...

  9. MVC 后台DataTable 前台遍历

    /// <summary> /// 多级审批流展示 /// </summary> /// <returns></returns> public Acti ...

  10. 载入OpenSSL的动态库——学会使用tryToLoadOpenSslWin32Library和QPair

    Libraries name of openssl? The "library" portion of OpenSSL consists of two libraries. On ...