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" ...
随机推荐
- MVC不错的学习资料
MVC不错的学习资料: http://www.cnblogs.com/darrenji/
- 使用FMDB,libqrencode实现二维码的生成并且保存到数据库
/** * 1.首先导入第三方库FMDB和libqrencode,添加库libsqlite3.tbd
- iOS框架介绍
iOS框架介绍 Cocoa Touch GameKit 实现对游戏中心的支持,让用户能够在线共享他们的游戏相关的信息 iOS设备之间蓝牙数据传输 从iOS7开始过期 局域网游 ...
- DataSet 图解
DataSet层次结构中的类请参见表所示: 类 说明 DataTableCollection 包含特定数据集的所有DataTable对象 DataTable 表示数据集中的一个表 DataColumn ...
- python核心编程-习题-第二章
PS:PDF在线地址:http://bcmi.sjtu.edu.cn/~zhaohai/ptm2012/data/Python-kernel.programming.v2.pdf 2-1 变量,pr ...
- 【Python备忘】python判断文件和文件夹是否存在
python判断文件和文件夹是否存在 import os os.path.isfile('test.txt') #如果不存在就返回False os.path.exists(directory) #如果 ...
- 打造阅读Linux源代码利器
打造阅读Linux源代码利器 在Linux里阅读/编写代码一般用vi 但是碰到较大的项目时阅读源代码还是比较费力,一直用find 和 grep命令. 其实,我们自己可以打造一个阅读源代码的vim,这 ...
- python bool值要注意的一些地方
1.像(),[],{}这三个是可以通过bool(()),bool([]),bool({})转化为bool值的:且它们转化后的结果为False.但是这三个值它本身并不等于False.切记不可以与Fals ...
- ASP.NET 短路由配置
1. 首先在项目新建文件叫App_Code或者App_Start 在文件中新建WebFromRouteHandler.cs 文件. WebFromRouteHandler中的代码如下, public ...
- SQL 临时表或表变量替代游标
1.如果表没有自动增长的标识列(int) 使用临时表 SELECT IDENTITY(int) NewID ,.. INTO #tmp FROM YouTable 2.表有标识列 使用表变量 INSE ...