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不能重复使用)。
jQuery 随滚动条滚动效果 (适用于内容页长文章)的更多相关文章
- jQuery 随滚动条滚动效果 (固定版)
//侧栏随动 var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动 rollSet = $('.search,.weibo,.group,.feed-mai ...
- jquery控制div随滚动条滚动效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery div随滚动条 ...
- javascript实现 滚动条滚动 加载内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery 禁止滚动条滚动,并且滚动条不消失,页面大小不闪动
一,禁止滚动,滚动条不消失,页面大小不闪动 //禁止滚动条滚动 function unScroll() { var top = $(document).scrollTop(); $(document) ...
- jQuery仿百度帖吧头部固定不随滚动条滚动效果
<style> *{margin:0px;padding:0px;} div.nav{background:#000000;height:57px;line-height:57px;col ...
- jquery操作滚动条滚动到指定元素位置 scrollTop
$('.brand_t a').bind('click',function(){ if($(this).attr('title1')){ var toChar = $(this).attr('titl ...
- Jquery 文字上下滚动效果示例代码
<!doctype html> <html> <head> <meta charset="utf-8"> ...
- JQuery控制滚动条滚动到指定位置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery操作滚动条滚动到指定位置
<html><head><script type="text/javascript" src="/jquery/jquery.js" ...
随机推荐
- makefile常用指令和常见变量。
引用文章A:http://blog.csdn.net/liang13664759/article/details/1771246 文章介绍:非常详细的文章,讲解上都是比较基础的知识. 本文可能会持续更 ...
- oracle数据块的大小
标准数据块用于临时表空间和系统表空间,同时也是一个表空间数据块的默认值.标准数据块的大小是在创建数据库时由参数DB_BLOCK_SIZE确定的.若要改变这一设置必须重建数据库. DB_CACHE_SI ...
- 层次节点——NODE节点
1.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...
- python运维开发(十一)----线程、进程、协程
内容目录: 线程 基本使用 线程锁 自定义线程池 进程 基本使用 进程锁 进程数据共享 进程池 协程 线程 线程使用的两种方式,一种为我们直接调用thread模块上的方法,另一种我们自定义方式 方式一 ...
- Nginx Http模块开发
关于Nginx Http模块开发的文章非常少,只有Emiler的那篇关于Http模块的文章,但是那篇文章里面,并没有说到事件型的模块如何进行开发.而且文章里面提到的内容实在是让人有点意犹未尽.因此,对 ...
- 用 for/in 在 Java 5.0 中增强循环
这个方便的构造提供了什么?什么时候适用于代码? Brett McLaughlin (brett@newInstance.com), 作者/编辑, O'Reilly Media, Inc. 简介: fo ...
- Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传等
仿照微信,朋友圈分享图片功能 .可以进行图片的多张选择,拍照添加图片,以及进行图片的预览,预览时可以进行缩放,并且可以删除选中状态的图片 .很不错的源码,大家有需要可以下载看看 . 微信 微信 微信 ...
- 学习linux之用户-文件-权限操作
添加用户组 添加 gropuadd 用户组名 修改 groupmod 用户组名 删除 groupdel 用户组名 添加用户 添加 useradd 用户名 设密码 passwd 密码 删除 userde ...
- __declspec(dllimport)的作用
是时候总结一下__declspec(dllimport)的作用了.可能有人会问:__declspec(dllimport)和__declspec(dllexport)是一对的,在动态链接库中__dec ...
- C++类对应的内存结构
提示1:对“内存结构”表示有疑问或不解的,先参考: http://blog.csdn.net/guogangj/archive/2007/05/25/1625199.aspx, 本文使用的表示方法和V ...