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" ...
随机推荐
- oracle 11g R2安装报错ORA-00604及ORA-06553的原因及解决方法
10月31日PO主打算装oracle 11g R2,于是通过QQ旋风离线下载功能从oracle官网的链接下载了win32_11gR2_database_1of2.zip和win32_11gR2_dat ...
- linux配置加载顺序
linux加载配置项时通过下面方式 首先 加载/etc/profile配置 然后 加载/ect/profile.d/下面的所有脚本 然后 加载当前用户 .bash_profile 然后 加载.bash ...
- T - stl 的mapⅡ
Description Ignatius is so lucky that he met a Martian yesterday. But he didn't know the language th ...
- PC远程调试移动设备(转载)
我们在移动端进行前端开发时,会遇到一个让人头痛但不得不面对的问题--调试. 在 PC 机器上,我们有功能强大的 Chrome DevTools.Firebug,即便是老版本的 IE ,我们也可以安装微 ...
- Macbook使用技巧
Mac OSX下 safari 常用快捷键盘 Command + R 刷新页面 Command + T 新建一个标签 Command + Shift+ 左右方向键 ...
- Oracle EBS-SQL (PO-18):检查工作台下达的PR在系统找不到.sql
select * From apps.po_requisitions_interface_all---------------------------------------------------- ...
- 【python】中文的输出,打印,文件编码问题解决方法
直接在python中输入中文的字符串会报编译错误SyntaxError: Non-ASCII character,因为python文件默认编码方式是ASCII.如果想要打印中文字符,有两种方式: 1. ...
- 一个失误导致微信下载图片接口Token失效
公司的应用调了一个微信上传下载图片的接口,本来在线上跑的好好的,什么问题没有,但是这两天总是不定时的出现下载下来的图片损坏,拿着Token和serverid去接口测试网页验证,返回的是Token失效了 ...
- Android_NFC_开发介绍
API概览 Android.nfc 和android.nfc.tech 为android 处理nfc的java 包. 1.Android.nfc package包含顶层类用来与本地NFC适配器交互. ...
- linux系统监控常用工具
linux系统监控常用工具 一.系统核心工具包(coreutils) 1./bin/df 报告系统的磁盘空间用量 df -h 显示磁盘分区fdisk -l 2./bin/uname 显示系统信息 u ...